ویژگی animation-direction در CSS

animation-direction Property

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

نحوه نوشتار

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

مقادیر

normal​

در هر دور انیمیشن به از ابتدا شروع می شود. یعنی هر دفعه که انیمیشن تکرار می شود، به مبدا شروعش باز می گردد و دوباره اجرا می شود. این مقدار پیشفرض است.

reverce​

در هر دور انیمیشن به طور معکوس اجرا می شود. یعنی هر دفعه که انیمیشن تکرار می شود، انیمیشن از انتها شروع و به مبدا باز میگردد. مراحل اجرای انیمیشن بصورت معکوس می شود و همچنین توابع زمانبدی هم معکوس عمل خواهند کرد. برای مثال در تابع زمانبندی (timing function) eas-in به east-out تبدیل خواهد شد.

alternate​

انیمیشن در هر دور جهت اجرای برنامه را معکوس خواهد کرد. اولین تکرار از مبدا اجرا خواهد شد.

alternate-reverse​

انیمیشن در هر دور جهت اجرای برنامه را معکوس خواهد کرد. اولین تکرار بصورت معکوس (از انتها) اجرا خواهد شد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
(در کلاس های cir1, cir2, cir3 و cir4 به تغییرات در مقدار ویژگی animation-direction توجه کنید.)

html

<div class="wrapper">
    <div class="anim">
         <div class="cir1">normal</div>
    </div>
    <div class="anim">
         <div class="cir2">reverse</div>
    </div>
    <div class="anim">
         <div class="cir3">alternate</div>
    </div>
    <div class="anim">
         <div class="cir4">alternate-reverse</div>
    </div>
</div>

css

.wrapper {
     max-width: 400px;
     margin: 20px auto;
     direction: rtl;
     font-family: 'Segoe UI';
}
.anim {
     padding: 10px 0;
     background-color: #f3f3f3;
     margin-bottom: 10px;
}
[class*="cir"] {
     width: 80px;
     height: 80px;
     background-color: dodgerblue;
     color: #ffffff;
     border: 3px solid #000000;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
}
.cir1 {
     animation-name: Anim1;
     animation-duration: 4s;
     animation-timing-function: linear;
     animation-delay: 1s;
     animation-iteration-count: 2;
     animation-direction: normal;
}
.cir2 {
     animation-name: Anim1;
     animation-duration: 4s;
     animation-timing-function: linear;
     animation-delay: 1s;
     animation-iteration-count: 2;
     animation-direction: reverse;
}
.cir3 {
     animation-name: Anim1;
     animation-duration: 4s;
     animation-timing-function: linear;
     animation-delay: 1s;
     animation-iteration-count: 2;
     animation-direction: alternate;
}
.cir4 {
     animation-name: Anim1;
     animation-duration: 4s;
     animation-timing-function: linear;
     animation-delay: 1s;
     animation-iteration-count: 2;
     animation-direction: alternate-reverse;
}
@keyframes Anim1 {
     from {
          margin-right: 0%;
          color: #000000;
          background: orange;
      }
      to {
          margin-right: 70%;
          color: #000000;
          background: orange;
      }
}

توجه داشته باشید که انیمیشن زیر به هنگام لود شدن صفحه اجرا می شود، لذا برای مشاهده بهتر و ویرایش کد میتوانید وارد محیط کد نویسی تحت وب که دکمه آن زیر پنجره پایین قرار دارد، شوید یا دکمه reload را در پنجره پایین کلیک کنید:

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این سودو کلاس در CSS پشتیبانی می کنند.