%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (آخرین فرصت)
سبد (0)

تبلیغات

خصوصیت animation

مثال (خصوصیت animation)

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

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
خودتان امتحان کنید »

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

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای Internet Explorer 10, Firefox, Opera خصوصیت animation را پشتیبانی می کنند.

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

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


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

از خصوصیت animation می توانید برای مختصر نویسی 6 خصوصیت مربوط به انیمیشن استفاده نمایید.

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. 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 نام انیمیشن که در قانون [email protected] ذکر شده است را مشخص می کند.
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)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی