خصوصیت های انیمیشن در CSS3
در جدول زیر، لیست تمام خصوصیت های انیمیشن و قانون keyframes@ آورده شده است:
| خاصیت | توضیحات | CSS |
|---|---|---|
| @keyframes | متحرک سازی را مشخص می کند. | 3 |
| animation | تمام خصوصیت های متحرک سازی بجز خصوصیت animation-play-state را بصورت مختصر مشخص می کند. | 3 |
| animation-name | نام انیمیشن که در قانون keyframes@ ذکر شده است را مشخص می کند. | 3 |
| animation-duration | زمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است. | 3 |
| animation-timing-function | نحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض "ease" است. | 3 |
| animation-delay | زمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است. | 3 |
| animation-iteration-count | تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است. (مقدار infinite انیمیشن را تا بینهایت تکرار خواهد کرد) | 3 |
| animation-direction | اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند. (مقدار alternate انیمیشن را به صورت عکس تکرار می کند) | 3 |
| animation-play-state | توقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض "running" است. | 3 |
در دو مثال زیر، تمام خصوصیت های بالا استفاده شده است:
مثال (خصوصیت های انیمیشن در CSS3)
اجرای یک انیمیشن با نام "myfirst" که تمام خصوصیت های انیمیشن برای آن تنظیم شده است:
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
خودتان امتحان کنید »{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
مثال (خصوصیت های انیمیشن در CSS3)
اجرای انیمیشن مثال قبل، که تمام تنظیمات قبلی در خصوصیت animation تنظیم شده است:
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
خودتان امتحان کنید »{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
