صفت animation-duration در زبان سی اس اس

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی animation-duration در css توضیحاتی را ارائه نماییم. ویژگی کاربردی animation-duration در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی CSS3 معرفی شده است.

معرفی و کاربرد ویژگی animation-duration در css

توسط خاصیت animation-duration می توانید برای یک تگ html ، مدت زمان چرخه یک انیمیشن را مشخص نمایید. این مدت زمان انیمیشن می تواند بر اساس واحد ثانیه یا میلی ثانیه مقداردهی شود.

در حقیقت زمان یک سیکل کامل انیمیشن توسط صفت animation-duration تعیین شده و سپس سیکل بعدی نیز با همین زمان اجرا می شود و این چرخه ادامه می یابد.

مقادیر ویژگی animation-duration در css

صفت جدید animation-duration که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

1. مقدار time
2. مقدار initial
3. مقدار inherit

مقدار time درون خاصیت animation-duration در زبان css

اگر خاصیت animation-duration را برابر با یک مقدار عددی که مثلا 2s می باشد قرار دهیم، در حقیقت از مقدار time جهت تعیین مدت زمان چرخه یک انیمیشن استفاده کردیم.

مقدار initial درون ویژگی animation-duration در css

اگر خاصیت animation-duration را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض که معادل صفر ثانیه است به مدت زمان چرخه برای یک تگ html منسوب می شود.

در حقیقت در این حالت مدت زمانی برای اجرای چرخه در انیمیشن نخواهیم داشت.

مقدار inherit درون ویژگی animation-duration در css

اگر خاصیت animation-duration را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیات انیمیشن را از والد پدری خود به ارث می برد.

مثال در مورد خاصیت animation-duration در زبان طراحی css

<h2>The animation-duration 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-duration: 2s;
animation: mymove 5s infinite; animation-delay: 2s;”></div>

بررسی خاصیت animation-duration از نظر نسخه زبان طراحی css

ویژگی کاربردی animation-duration در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

پشتیبانی مرورگرهای اینترنتی از ویژگی animation-duration در css

خاصیت css
animation-duration	43.0	10.0	16.0	9.0	30.0

بررسی ساختاری خصوصیت animation-duration در سی اس اس

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

ویژگی animation-duration در css مدت چرخه انیمیشن – اختصاصی سایت آموزی