animation-direction

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

نکته قابل توجه اینکه اگر انیمیشنی بوسیله این ویژگی معکوس شود مقدار ویژگی animation-timing-function آن عنصر نیز معکوس خواهد شد. مثلا اگر ease-in باشد در حالت معکوس, انیمیشن بصورت ease-out اجرا می شود.

مقدار پیشفرض ویژگی animation-direction حالت عادی یا normal می باشد, که انیمیشن از اولین فریم کلیدی شروع شده و با آخرین به اتمام می رسد.


  animation-direction: normal; /* این مقدار پیشفرض است پس لزومی برای نوشتنش نیست */

 

See the Pen animation-direction: normal; by Mojtaba Seyedi (@seyedi) on CodePen.


 

مقدار دیگر این ویژگی reverse می باشد که باعث می شود تا انیمیشن از آخر به اول حرکت کند یعنی از آخرین فریم کلیدی به اولین فریم کلیدی تغییرات را خواهیم دید. ناگفته نماند که اگر انیمیشن تا بی نهایت تکرار شود تمام تکرار ها هم به همین صورت معکوس خواهند بود.


  animation-direction: reverse;

 

See the Pen animation-direction: reverse by Mojtaba Seyedi (@seyedi) on CodePen.


 

مقدار دیگری که این ویژگی می تواند داشته باشد alternate است که ترکیب دو حالت normal و reverse می باشد, یعنی انیمیشن یک بار از اول به آخر و بار دیگر از آخر به اول اجرا می شود. نکته ای که در این حالت باید توجه داشت این است که دفعاتی که انیمیشن از آخر به اول اجرا می شود شامل تکرارها می باشند. مثلا اگر مقدار ویژگی animation-iteration-count برابر با عدد 4 باشد به این معنا است که دو بار انیمیشن از اول به آخر و دو بار از آخر به اول اجرا می شود.


  animation-direction: alternate;

 

See the Pen animation-direction: alternate by Mojtaba Seyedi (@seyedi) on CodePen.


 

و مقدار آخر alternate-reverse است که معکوس حالت قبل یعنی alternate می باشد یعنی در اولین تکرار انیمیشن از آخر به اول و سپس در تکرار بعدی از اول به آخر اجرا می شود.


  animation-direction: alternate-reverse;

 

See the Pen animation-direction: alternate-reverse by Mojtaba Seyedi (@seyedi) on CodePen.


 

مثل دیگر ویژگی های انیمیشن این ویژگی نیز می تواند به صورت لیست جدا شده بوسیله ویرگول برای انیمیشن های مختلف بر روی یک عنصر تنظیم شود. وقتی از این روش برای تعیین تکرار چند انیمیشن بصورت یکجا استفاده می کنید باید توجه داشته باشید که ترتیب آن ها برای تعیین ویژگی های دیگر انیمیشن از قبیل animation-delay, animation-duration, animation-name و غیره, اهمیت خواهد داشت.


.element {
  animation-name: bounce, shake, slide;
  animation-duration: 1s, .3s, 500ms;
  animation-timing-function: ease-out, ease, linear;
  animation-iteration-count: alternate, normal, reverse;
}

تعیین این ویژگی در انیمیشن برای یک عنصر از طریق روش مختصر نویسی بوسیله ویژگی animation رایج و راحتر است.

پشتیبانی مرورگر ها

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *