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; همین موضوع است.

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