تعریف و کاربرد
خاصیت animation یک مقدار مختصر برای خاصیت های:
- animation-name.
- animation-duration.
- animation-timing-function.
- animation-delay.
- animation-iteration-count.
- animation-direction.
- animation-fill-mode.
- animation-play-state.
می باشد.
نکته: همیشه ویژگی animation-duration را استفاده کنید زیرا در غیر این صورت مدت زمان 0 تعیین می شود و انیمیشن اجرا نمی شود.
اطلاعات
| # | توضیحات |
|---|---|
| مقدار پیشفرض | خالی= 0 - آسان= 0 - در حال اجرا= 1 |
| ارث بری | خیر |
| انیمیشن | خیر |
| نسخه | CSS3 |
| نگارش JS | object.style.animation="pnlmove 3s infinite" |
سازگاری با مرورگر
اعدادی که در فیلد های مرورگر ها درج شده اند، بیانگر ورژن ساپورت کننده خاصیت animation هستند.
| # | کروم | ادج | فایرفاکس | سافاری | اپرا |
|---|---|---|---|---|---|
| animation |
شیوه نگارش
مقادیر
| مقادیر | توضیحات |
|---|---|
| animation-name | نام یک انیمیشن را مشخص می کند. |
| animation-duration | زمان اجرا شدن یک انیمیشن را مشخص می کند. |
| animation-timing-function | سرعت اجرای یک انیمیشن را تعیین می کند. |
| nimation-delay | تاخیر زمانی ای را که قبل از شروع اجرا شدن یک انیمیشن باید اعمال شود را تعیین می کند. |
| animation-iteration-count | تعداد دفعات اجرا شدن یک انیمیشن را تعیین می کند. |
| animation-direction | تعیین می کند که انیمیشن در چرخه های مقدار دهی شده به صورت معکوس اجرا شود یا خیر. |
| animation-fill-mode | تعیین می کند که چه مقادیری توسط انیمیشن بدون زمان اجرایی انجام شوند. |
| animation-play-state | تعیین می کند که انیمیشن درحال اجرا شدن است یا بدون حرکت می باشد. |
| initial | این مقدار را به ویژگی پیش فرض خود اضافه می کند. |
| inherit | این مقدار را از تگ والد خود به ارث می برد. |
صفحات مرتبط
آموزش CSS: انیمیشن‌های CSS
مرجع HTML DOM: ویژگی انیمیشن
