keyframes@

از دستور keyframes@ برای تعریف رفتار یک چرخه انیمیشن در CSS استفاده می شود.

انیمیشن ها هم مثل transition ها ویژگی های نمایشی عناصر را در طول زمان تغییر می دهند. تفاوت اصلی در این است که ترنزیشن ها به طور خودکار در زمان تغییر یک ویژگی (مثلا در زمان رویداد hover) عمل می کنند اما انیمیشن ها زمانی که به صورت دستی ویژگی animation اعمال شود, عمل می کنند. به همین دلیل برای به وجود آوردن یک انیمیشن نیاز است که تغییرات ویژگی های یک عنصر را که قرار است متحرک سازی شود در یک keyframes@ تعریف کرده و سپس از آن بوسیله ویژگی animation استفاده کنیم.

تعریف انیمیشن و استفاده از آن


/* تعریف انیمیشن */
@keyframes your-animation-name {
    /* استایل های مربوط به انیمیشن */
}

/* اعمال انیمیشن روی عنصر */
.element {
    animation-name: your-animation-name;

    /* و یا استفاده از روش مختصر نویسی */
    animation: your-animation-name 1s ...
}

اول از همه یک نام برای انیمیشن در نظر گرفته و سپس در داخل keyframes@ فریم های کلیدی تعریف می شوند. به این معنی که مقادیری برای ویژگی های عنصری که قرار است متحرک سازی شود را در یک نقطه از دوره زمانی انیمیشن تعریف می کنیم. این به ما اجازه می دهد تا قدم های متفاوت را در بین زمان شروع و پایان انیمیشن کنترل کنیم.

یک نمونه ساده:


@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0% و 100% انتخابگرهای فریم های کلیدی هستند که بیان می کنند مثلا وقتی 100% از زمان انیمیشن طی شد رنگ عنصر کاملا آبی باشد. این ساده ترین نوع انیمشن است که باعث تغییر رنگ پس زمینه یک عنصر از یک مقدار به مقداری دیگر در گذر زمان می شود. و کاملا شبیه به یک transition عمل می کند. زمانی که می خواهید به اول و آخر یک انیمیشن اشاره کنید می توانید به جای 0% و 100% از کلمات کلیدی from و to استفاده کنید.


@keyframes change-bg-color {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

فرض کنید می خواهیم عنصری در یک چهارم انیمیشن 100 پیکسل بالا برود و سپس در نصف زمان انیمیشن به مکان قبلش باز گردد و دوباره در سه چهارم انیمیشن 100 پیکسل بالا برود و در آخر انیمیشن دوباره در مکان اولیه خود قرار بگیرد:


@keyframes bouncing {
    0% {
        top: 0;
    }
    25% {
        top: 100px;
    }
    50% {
        top: 0;
    }
    75% {
        top: 100px;
    }
    100% {
        top: 0;
    }
}

همانطور که می بینید برخی از فریم های کلیدی در انیمیشن بالا استایل های تکراری دارند پس می توان آن ها را به صورت زیر نوشت:


@keyframes bouncing {
    0%, 50%, 100% { /* from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}

فرض کنید می خواهید عنصری را در صفحه جابجا کنید. با ترنزیشن ها فقط می توانستید دو نقطه اول و آخر حرکت را برای عنصر تعریف کنید که مرورگر مسیر خطی را برای حرکت, محاسبه و اجرا می کرد. اما بوسیله انیمیشن ها می توانید مسیر را از حالت خطی خارج کنید و بر روی حرکت و مکان عنصر در نقاط مختلف زمانی انیمیشن کنترل داشته باشید. انیمیشن زیر پریدن در راستای افقی را شبیه سازی می کند:


@keyframes jump {
    0% {
        left: 0; top: 0;
    }

    25% {
        left: 100px; top: -200px;
    }

    50% {
        left: 200px; top: 0;
    }

    750% {
        left: 300px; top: -200px;
    }

    100% {
        left: 400px; top: 0;
    }
}

.element {
    position: relative;
    left: 0;
    top: 0;
    
    animation-name: jump;
    animation-duration: 3s;
}

 

See the Pen keyframes by Mojtaba Seyedi (@seyedi) on CodePen.

 

در زمان تعریف فریم های کلیدی همچنین می توانید فریم های 0% و 100% را تعریف نکنید اما به این نکته توجه کنید که مرورگر یک فریم کلیدی بر اساس ویژگی ها با مقادیر حساب شده در آن نقاط زمانی می سازد. مثلا اگر 0% را تعریف نکنید مرورگر به ویژگی های اولیه خود عنصر نگاه می کند و از آنها برای نقطه شروع مقادیر انیمیشن استفاده می کند. به مثال زیر توجه کنید:


@keyframes move {
  50% {
    left: 300px;
  }
}

 

See the Pen keyframes by Mojtaba Seyedi (@seyedi) on CodePen.


 

همانطور که می بینید نقطه اولیه ای برای شروع وجود ندارد پس مرورگر به ویژگی های اولیه عنصر نگاه می کند که left برابر صفر است پس آن را نقطه شروع حرکت می داند و در آخر هم نقطه پایانی یعنی 100% تعریف نشده است که باز هم مرورگر ویژگی اولیه عنصر یعنی همان left: 0; را به عنوان فریم نهایی در نظر می گیرد.

 
تمام ویژگی ها یک عنصر قابلیت پذیرفتن انیمیشن را ندارند پس اگر چنین ویژگی در یک فریم کلیدی نوشته شود توسط مرورگر نادیده گرفته می شود و آن استایل هیچ تاثیری نخواهد داشت. اما یک استثنا وجود دارد آن هم animation-timing-function می باشد که انیمیشن بر روی مقادیر آن اعمال نمی شود ولی وقتی در یک فریم کلیدی نوشته شود از طرف مرورگر نادیده گرفته نمی شود.

 
دموی زیر برای بررسی بیشتر آماده شده است:

 

See the Pen keyframe demo by Mojtaba Seyedi (@seyedi) on CodePen.


 

توجه داشته باشید زمانی هست که می خواهید یک فریم کلیدی برای تغییر یک ویژگی بوجود بیاورید اما می دانید که ویژگی های دیگر باید ثابت بمانند. برای انجام این عمل باید آن ویژگی که مقدارش قرار نیست تغییر کند هم در فریم کلیدی جدید با همان مقدار قبلی تکرار شود. در مثال بالا دلیل تکرار opacity:1; همین موضوع است.

پشتیبانی مرورگر ها

28 دیدگاه برای “keyframes@

      1. مثلا من با انیمیشن یک دایره ایجاد کردم که وقتی موس روش میاد بزرگ میشه..میخوام یه عکس مثلث وسطش بزارم که با تغییرات دایره همچنان وسط اشکال بمونه…..چنین چیزی امکان داره ؟؟

  1. سلام .لطفا حین نوشتن کد ها الویت ها رو هم رعایت کنید که چشم بیننده به ترتیب اشتباه قرار گرفتن درست ویژگی و مقدار دهی ها عادت کنه.تشکر

  2. سلام ببخشید میشه بگید چطورمیشه انیمیشن رو در آخر مسیر که رسید نگه داشت؟ یعنی وقتی مثلا مربع تا ته رفت همونجا وایسه وبعد از زمانی که میدیم برگرده سرجاش؟

  3. نمیفهمم اون آخر که میرسه چطور میشه بهش گقت که مثلا 2 دقیقه دیگه برگرد به اول؟ممنون اگه جواب بدید

  4. سلام واقعا متشکرم بابت سایت عالیتون همه چیز رو جامع و کامل توضیح دادید.
    یه سوال داشتم میشه نحوه داینامیک کردن 6 ضلعی رو میتونید توضیح بدید

  5. سلام ممنون از شما خیلی مطلب خوب و کاملی بود کاملا متوجه شدم فقط اگه infinite رو بزار خودش اتوماتیک تکرار میشه درسته؟

  6. با سلام اگر بخواهیم بعد از لمس شکل دایره شکل به صورت نیم دوارانی به سمت پایین برود در صورت امکان کدش را میدهید.ممنون

  7. با سلام اگر بخواهیم بعد از لمس شکل دایره شکل به صورت نیم دوارانی به سمت پایین برود در صورت امکان کدش را میدهید.ممنون

  8. سلام
    با تعدادی دایره کوچیک یه دایره بزرگ ساختم اگ بخوام انیمیشن بدم بهش تا از یه سمت دونه دونه رنگش عوض بشه باید چه کدی بزنم

  9. سلام. این بخش رو متوجه نشدم. منظور چیه؟

    تمام ویژگی ها یک عنصر قابلیت پذیرفتن انیمیشن را ندارند پس اگر چنین ویژگی در یک فریم کلیدی نوشته شود توسط مرورگر نادیده گرفته می شود و آن استایل هیچ تاثیری نخواهد داشت. اما یک استثنا وجود دارد آن هم animation-timing-function می باشد که انیمیشن بر روی مقادیر آن اعمال نمی شود ولی وقتی در یک فریم کلیدی نوشته شود از طرف مرورگر نادیده گرفته نمی شود.

    ذهنمو درگیرکرده.

    1. سلام،

      فرض کنید توی یک keyframes از ویژگی مثل text-decoration استفاده کنیم، خب این ویژگی قابل متحرک سازی نیست در نتیجه مرورگر اون رو در نظر نمیگیره و انگار که شما اصلا ننوشتی همچین خط کدی رو.

      حالا در بین همه ویژگی هایی که متحرک سازی نمیشن یک ویژگی استثنا هستش (animation-timing-function) که خودش قابل متحرک سازی نیست اما اگر در keyframe نوشته بشه نادیده گرفته نمیشه و مقدارش باعث میشه تا شتاب انیمیشن در اون فریم تغییر کنه.

      امیدوارم به ذهن درگیرتون کمک کرده باشم :)

      موفق باشید.

  10. سلام من نوشته ای دارم که یک گردش مداوم دارد ولی موقع گردش درفایرفاکس نوشته برعکس نمایش داده شده. میشه راهنمایی کنید چطور تغییر بدم

  11. سلام خسته نباشید دمتون گرم.
    ببخشید چطور میشه متن رو عوض کرد؟
    مثلا من یک divدارم که توش یه متنیه و میخوام هی عوض بشه و متنایی که میخوام بیاد به جاش.
    چطور باید این کار رو انجام بدم؟
    ممنون میشم جواب بدید…

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *