کدپلن

ایجاد یک انیمیشن ساده بوسیله CSS3

انیمیشن با CSS این قابلیت را به ما می دهد تا بدون جاوا اسکریپت یک انیمیشن با قابلیت ست کردن keyframes درست کنیم .

keyframe انیمیشن ها در حال حاضر در مرورگرهای webkit ( نظیر کروم) ، فایرفاکس ، و IE10 ساپورت می شوند و در سایر مرورگر های قدیمی انیمیشن شما نمایش داده نمی شود .

۸ خصوصیت برای تعریف انیمیشن در CSS وجود دارد

۱- animation-delay :  تعریف می کند چه موقع انیمیشن استارت شود.

۲- animation-direction : تعیین می کند که انیمیشن به صورت طبیعی یا معکوس اجرا شود .

۳- animation-duration : طول مدت کامل یک سیکل کامل انیمیشن را تعریف می کند.

۴- animation-interation-count : تعداد دفعاتی که باید سیکل انیمیشن پیش از توقف تکرار شود .

۵- animation-name : یک نام برای انیمیشن با قاعده keyframes تعیین می کند.

۶- animation-play-state : تعیین می  کند چه موقع انیمیشن استاپ یا استارت شود .

۷- animation-timing-function : تعیین می کند چگونه یک انیمیشن پس از سیکلش رفتار کند.

۸- animation-fill-mode : تعیین می کند چگونه یک css انیمیشن باید استایل خود را پیش و پس از اجرا بپذیرد

در زیر یک نمونه کد را با هم می بینیم

div {
   animation-name: move;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0.5s;
   animation-iteration-count: 2;
   animation-direction: alternate;

   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-delay: 0.5s;
   -moz-animation-iteration-count: 2;
   -moz-animation-direction: alternate;

   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}

/* codeplan.ir. */

@keyframes move {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100px);
   }
}

@-moz-keyframes move {
   from {
      -moz-transform: translateX(0);
   }
   to {
      -moz-transform: translateX(100px);
   }
}

@-webkit-keyframes move {
   from {
      -webkit-transform: translateX(0);
   }
   to {
      -webkit-transform: translateX(100px);
   }
}

البته به اختصار به صورت زیر نیز می توانیم بیاوریم :

div {
   animation: move 1s ease-in-out 0.5s 2 alternate;
   -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
   -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}

Keyframe :
هر کی فریم تعیین می کند که المان های انیمیشن چگونه برای رسیدن به نقطه هدف در یک سکانس رندر شوند . در صورتیکه مقدار زمان کی فریم ۰% باشد بیانگر زمان آغاز و اگر ۱۰۰% باشد بیانگر زمان خاتمه هست .
به مثال زیر توجه داشته باشید.

@keyframes move {
   ۰% { transform: translateX(0); }
   ۱۰۰% { transform: translateX(100px); }
}

/* codeplan.ir */

@keyframes move {
   ۰% { transform: translateX(0); }
   ۵۰% { transform: translateX(20px); }
   ۱۰۰% { transform: translateX(100px); }
}