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

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

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

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

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

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

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

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

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

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

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

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

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

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

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

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

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

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

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

اگر خاصیت 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 مدت چرخه انیمیشن - سایت آموزی

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

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

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

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

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

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

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

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

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

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

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

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

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

تگ های HTML در W3school

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

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

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