ویژگی animation-duration در css مدت چرخه انیمیشن

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

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

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

معرفی و کاربرد ویژگی جدید animation-duration در زبان طراحی css

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

این مدت زمان انیمیشن می تواند بر اساس واحد ثانیه یا میلی ثانیه مقداردهی شود.

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

مقادیر صفت جدید animation-duration در زبان طراحی سی اس اس

صفت جدید 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 در زبان سی اس اس

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

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

[html]<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>[/html]

ویژگی animation-duration در css مدت چرخه انیمیشن

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

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

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

پشتیبانی مرورگرهای اینترنتی از خاصیت animation-duration در زبان طراحی سی اس اس

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

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

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

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

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

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

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

تگ های HTML در W3school

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

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

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