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

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

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

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

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

توسط خاصیت 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 در زبان سی اس اس

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

عناوین ساختاری خاصیت animation-direction

وضعیت ساختاری خاصیت animation-direction

مقدار پیش فرض

normal

قابلیت توارث

ندارد

قابلیت تحرک

ندارد

ورژن css صفت

CSS3

سینتکس صفت در جاوا اسکریپت

"object.style.animationDirection="reverse

پشتیبانی مرورگرهای اینترنتی از ویژگی animation-direction در زبان طراحی سی اس اس