مرجع خصوصیت های CSS

قانون @keyframes

مثال

عنصر <div> بتدریج 200 پیکسل به سمت پایین حرکت می کند:

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

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

در انتهای این بیاموز، مثال های بیشتری را خواهید دید

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

    

مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

تعریف و کاربرد

برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.

keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.

در طول اجرای انیمیشن می توانید چندین بار Style را تغییر دهید.

تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.

0% ابتدای انیمیشن و 100% انتهای آن است.

برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.

توجه: پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.

نحوه استفاده

@keyframes animationname {keyframes-selector {css-styles;}}
مقدار توضیحات
animationname الزامی است. نام انیمیشن را مشخص می کند.
keyframes-selector الزامی است. مشخص می کند در چه زمانی از اجرای انیمیشن، Style اعمال شود.
مقادیر مجاز:

0-100%
from (0%)
to (100%)

توجه: در یک انیمیشن می توانید چندین keyframes-selectors داشته باشید.
css-styles الزامی است. می تواند شامل یک یا چند خصوصیت CSS باشد.

مثال - خودتان امتحان کنید

مثال

مشخص کردن چندین keyframes-selector در یک انیمیشن:

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

مثال

تغییر چند Style به صورت همزمان:

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

مثال

چندین keyframes-selector و Style مختلف در یک انیمیشن:

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)