animation Property
ویژگی animation-duration
در CSS مدت زمانی را که انیمیشن از ابتدا تا انتها اجرا میشود را مشخص می کند.
نحوه نوشتار
/* انیمیشن تکی */ animation-duration: 6s; animation-duration: 120ms; /* چند انیمیشن */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms;
مقادیر
زمانی که طول می کشد انیمیشن یک دور کامل از ابتدا تا انتها را طی کند. واحد این مدت ممکن است برحسب ثانیه (s
) یا میلی ثانیه (ms
) باشد. مقدار باید مثبت یا صفر باشد و واحد آن نیز نوشته شود. مقدار 0s
که مقدار پیشفرض است، به این معنیست که انیمیشنی اتفاق نخواهد افتاد.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
(به مقادیر animation-duration
در کلاس های cir1, cir2, cir3 ,cir4 توجه نمایید.)
html
<div class="wrapper"> <div class="anim"> <div class="cir1">مدت انیمیشن: ۴ثانیه </div> </div> <div class="anim"> <div class="cir2">مدت انیمیشن: ۲ثانیه </div> </div> <div class="anim"> <div class="cir3">مدت انیمیشن: ۸ثانیه </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: 110px; height: 110px; 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: 0s; animation-iteration-count: infinite; animation-direction: alternate; } .cir2 { animation-name: Anim1; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } .cir3 { animation-name: Anim1; animation-duration: 8s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes Anim1 { from { margin-right: 0%; } to { margin-right: 70%; } }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این سودو کلاس در CSS پشتیبانی می کنند.