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 پشتیبانی می کنند.