@keyframes چیست و چه کاربردی در css3 دارد؟

در این قسمت به بررسی @keyframes می پردازم.

شما با این دستور می توانید انیمیش ها را   بوسیله css ایجاد کنید.

اگر انیمیشنی که می خواهیم ایجاد کنیم ، 0 تا 100 باشد(شروع انیمیشن 0 و پایان اون 100) بوسیله ی این دستور می توانیم، یک استایل خاصی را به زمان مشخصی از انیمیشن بدهیمف مثلا زمانی که انیمیشن ما 75% در حال طی کردن هست ، ما یک استایل خاص به آن می دهیم.

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

اینترنت اکسپلورر 10 ، موزیلا و اپرا

در ie 9 پشتیبانی نمی شود.

مثال:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}