خصوصیت animation-delay

مثال

بعد از 2 ثانیه انتظار، انیمیشن اجرا می شود:

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */

در انتهای این بیاموز، مثال های بیشتری را خواهید دید.

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

    

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

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

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

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

با استفاده از خصوصیت animation-delay می توانید زمان شروع انیمیشن را تعیین نمایید.

مقدار animation-delay به ثانیه (s) یا میلی ثانیه (ms) تعیین می شود.

نکته: مقادیر منفی قابل قبول است، بعنوان مثال، مقدار 2s- باعث می شود که انیمیشن بلافاصله اجرا شود اما شروع آن 2 ثانیه جلوتر از حالت عادی است.

مقدار پیشفرض 0
ارث بری خیر
نسخه CSS3
JavaScript ساختار object.style.animationDelay="2s"

نحوه استفاده

animation-delay: time;
مقدار توضیحات نمایش دادن
time اختیاری است. تعیین می کند که قبل از شروع انیمیشن چه مقدار باید منتظر بمانیم. این مقدار به ثانیه (s) یا میلی ثانیه (ms) تعیین می شود. مقدار پیشفرض 0 است.

مثال - خودتان امتحان کنید

مثال

مقدار منفی، توجه داشته باشید که شروع انیمیشن 2 ثانیه جلوتر از حالت عادی است.

animation-delay: -2s /* W3C and Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari and Chrome */

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)