خصوصیت animation

مثال

اتصال انیمیشن "mymove" به عنصر <div>، با استفاده از خصوصیت animation:

		div

		{

		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 خصوصیت مربوط به انیمیشن استفاده نمایید.

در جدول انتهای این بیاموز، می توانید توضیحات بیشتری را مطالعه نمایید.

توجه: باید نام و مدت زمان انیمیشن را مشخص نمایید. در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 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)