با استفاده از ویژگی 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 رایج و راحتر است.
.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 رایج و راحتر است.
در آخر بجای animation-direction نوشته شده animation-iteration-count
سلام استاد
p{
width: 150px;height: 150px;background: black ;
animation-name: a1;
animation-duration: 1s;
animation-iteration-count: 3 ;
animation-direction: alternate-reverse ;
}
@keyframes a1{
from{background: pink; }
to{ }
}چرا مقدار alternate-reverse وقتی میزاریم 2بار پس زمینه صورتی میشه در صورتی که حالات دیگه 3بار میبینم که پس زمینه صورتی شده؟
سلام، چون در سه بار شمار تکرار ، نهایتا دوبار حالت رفت و برگشت رخ میده که یک بارشم سرعتش خیلی تند میشه ، توی حالت alternate هم دو بار میشه
سلام نمیدونم
ببین انیمیشن ی جا اجرا میشه و ی جا داره به بایان میرسه اگه وقتی به بایان رسید تو حالت بیشفرض خودش بود هیچ اتفاقی نمیفته اما اگه تو حالت اولیه خودش نبود برمیگرده به حالت اولش که تو این برگشت به حالت اول رو اشتباها داری ی حرکت اضافه فرضش میکنی کنار تغییر رنگ همزمان تغییر عرض هم بذار متوجه میشی