ویژگی animation-direction در css انیمیشن 1401

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

معرفی و کاربرد ویژگی animation-direction در css

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

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

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

مقدار normal
مقدار reverse
مقدار alternate
مقدار alternate-reverse
مقدار initial
مقدار 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 در css

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

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

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

مثال در مورد ویژگی animation-direction در css

div{animation-direction: alternate;}

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

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

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

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

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

دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery

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


عناوین ساختاری خاصیت animation-direction	وضعیت ساختاری خاصیت animation-direction
مقدار پیش فرض	normal
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.animationDirection="reverse