صفت animation-delay در زبان سی اس اس
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی animation-delay در css توضیحاتی را ارائه نماییم. ویژگی کاربردی animation-delay در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی animation-delay در css
توسط خاصیت animation-delay می توانید برای یک تگ html ، اجرای انیمیشن را به تاخیر بیندازد. به عبارت دیگر زمانی که برای یک عنصر html توسط ویژگی های css ، انیمیشن تعریف کردید، از طریق خصوصیت animation-delay می توانید زمان اجرای انیمیشن را مدیریت کنید.
در صورتی که از این خاصیت استفاده نکنید، مقدار پیشفرض خصوصیت animation-delay ، که صفر ثانیه ( 0s ) می باشد، اعمال خواهد شد. یعنی انیمیشن مورد نظر بدون وقفه و بلافاصله در تگ html مربوطه اجرا می شود.
نکته مهم
ویژگی animation-delay در css مقدار منفی هم می تواند داشته باشد. زمانی که مقدار این ویژگی منفی باشد، انیمیشن بلافاصله اجرا می شود و به اندازه مقدار منفی این ویژگی از مدت زمان اجرای انیمیشن کم می شود.
در حقیقت در این حالت یک پرش در نمایش انیمیشن رخ می دهد. مثلا اگر مقدار تاخیر انیمیشن 3s- باشد، در این حالت 3 ثانیه اول اجرای انیمیشن دیده نخواهد شد. و با یک پرش 3 ثانیه ای همراه می شود.
مقادیر صفت animation-delay در زبان سی اس اس
صفت جدید animation-delay که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار time
- مقدار initial
- مقدار inherit
مقدار time درون ویژگی animation-delay در css
اگر خاصیت animation-delay را برابر با یک مقدار عددی که مثلا 2s می باشد قرار دهیم، در حقیقت از مقدار time جهت تاخیر در اجرای انیمیشن استفاده کردیم.
مقدار initial درون خاصیت animation-delay در زبان css
اگر خاصیت animation-delay را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض که معادل صفر ثانیه است برای اجرای انیمیشن در تگ html مربوطه اعمال خواهد شد.
مقدار inherit درون ویژگی animation-delay در css
اگر خاصیت animation-delay را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیات انیمیشن را از والد پدری خود به ارث می برد.
مثال در مورد خاصیت animation-delay با مقدار ثانیه مثبت در زبان طراحی css
<h2>The animation-delay Property</h2>
<p>Start the animation after 2 seconds:</p>
<div style=”width: 100px; height: 100px; background: red; position: relative;
-webkit-animation: mymove 5s infinite; -webkit-animation-delay: 2s;
animation: mymove 5s infinite; animation-delay: 2s;”></div>
مثال در مورد خاصیت animation-delay با مقدار ثانیه منفی در زبان طراحی سی اس اس
<h2>The animation-delay Property</h2>
<p>Using negative values: Here, the animation will start as if it had already been playing for 2 seconds:</p>
<div style=”width: 100px; height: 100px; background: red; position: relative;
-webkit-animation: mymove 5s infinite; -webkit-animation-delay: -2s;
animation: mymove 5s infinite; animation-delay: -2s;”></div>
- بررسی خاصیت animation-delay از نظر نسخه زبان طراحی css
ویژگی کاربردی animation-delay در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
عناوین ساختاری خاصیت animation-delay | وضعیت ساختاری خاصیت animation-delay |
مقدار پیش فرض | 0s ( صفر ثانیه ) |
قابلیت توارث | ندارد |
قابلیت تحرک | ندارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.animationDelay="1s |
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery
پشتیبانی مرورگرهای اینترنتی از صفت animation-delay در زبان سی اس اس
خاصیت css | ![]() | ![]() | ![]() | ![]() | ![]() |
animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
پیوندهای مهم و کاربردی
تگ های جدید HTML5 در سایت آموزی
صفات تگ های HTML در سایت آموزی
تگ های منسوخ شده HTML5 در سایت آموزی
تگ های block level و inline level در سایت آموزی
ویژگی animation-delay در css تاخیر اجرای انیمیشن – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید