ویژگی animation-direction در css جهت در انیمیشن

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

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

ویژگی animation-direction در css جهت در انیمیشن

ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن

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

توسط خاصیت animation-direction می توانید جهت گیری انیمیشن را درون یک تگ html تعیین کنید، که آیا انیمیشن باید به جلو ، عقب و یا در چرخه های متناوب پخش شود.

در حقیقت به طور پیش فرض جهت گیری انیمیشن در جهت موافق یا جلو ( forwards ) روی تگ html اجرا می گردد.

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

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

  1. مقدار normal
  2. مقدار reverse
  3. مقدار alternate
  4. مقدار alternate-reverse
  5. مقدار initial
  6. مقدار inherit

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

اگر خاصیت animation-direction را برابر با یک مقدار normal قرار دهیم، انیمیشن در جهت موافق یا جلو ( forwards ) در تگ html اجرا می شود. و این مقدار حالت پیش فرض خصوصیت animation-direction در انیمیشن را مهیا می کند.

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

اگر خاصیت animation-direction را برابر با یک مقدار reverse قرار دهیم، انیمیشن در جهت معکوس ( backwards ) در تگ html اجرا می شود.

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

اگر خاصیت animation-direction را برابر با یک مقدار alternate قرار دهیم، انیمیشن ابتدا در جهت پیش فرض رو به جلو ( forwards ) و سپس در جهت رو به عقب یا معکوس ( backwards ) روی تگ html اجرا می گردد.

مقدار alternate-reverse درون خاصیت animation-direction در زبان css

اگر خاصیت animation-direction را برابر با یک مقدار alternate-reverse قرار دهیم، انیمیشن ابتدا در جهت رو به عقب یا معکوس ( backwards ) و سپس در جهت پیش فرض رو به جلو ( forwards ) روی تگ html اجرا می گردد. ( برعکس مقدار alternate )

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

اگر خاصیت animation-direction را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

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

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

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

ویژگی animation-direction در css جهت در انیمیشن 

ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن | ویژگی animation-direction در css جهت در انیمیشن

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

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

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

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

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

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

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

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

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

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

تگ های HTML در W3school

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

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

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