خصوصیت animation
مثال (خصوصیت animation)
اتصال انیمیشن "mymove" به عنصر <div>، با استفاده از خصوصیت animation:
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
خودتان امتحان کنید »{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
تعریف و کاربرد
از خصوصیت animation می توانید برای مختصر نویسی 6 خصوصیت مربوط به انیمیشن استفاده نمایید.
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
در جدول انتهای این بیاموز، می توانید توضیحات بیشتری را مطالعه نمایید.
توجه: باید نام و مدت زمان انیمیشن را مشخص نمایید. در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 0 ثانیه است.
| مقدار پیشفرض | none 0 ease 0 1 normal none running |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.animation="mymove 5s infinite" |
نحوه استفاده
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| مقدار | توضیحات |
|---|---|
| animation-name | نام انیمیشن که در قانون keyframes@ ذکر شده است را مشخص می کند. |
| animation-duration | زمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است. |
| animation-timing-function | نحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض "ease" است. |
| animation-delay | زمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است. |
| animation-iteration-count | تعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است. (مقدار infinite انیمیشن را تا بینهایت تکرار خواهد کرد) |
| animation-direction | اگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند. (مقدار alternate انیمیشن را به صورت عکس تکرار می کند) |
| animation-fill-mode |
مقادیری که انیمیشن خارج از زمان اجرا می گیرد را مشخص می کند. |
| animation-play-state | توقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض "running" است. |
بیاموزهای مرتبط
CSS3 Animation (بیاموز CSS3)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 10149
