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

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

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

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

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

معرفی و کاربرد ویژگی جدید 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

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

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

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

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

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

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

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

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

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

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

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

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

تگ های HTML در W3school

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

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

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