animation-duration

ویژگی animation-duration مدت زمان اجرای یک چرخه انیمیشن را تعیین می کند.

زمان می تواند در دو واحد ثانیه و میلی ثانیه تعیین گردد. و بصورت پیشفرض مقدار این ویژگی 0s می باشد.

می توان زمان یک انیمیشن را بصورت زیر تعیین کرد:

.element {
  animation-duration: 2s;
}

و یا برای چند انیمیشن:

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 1s, .3s, 500ms;
}

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

به عنوان مثال داریم:

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 3s, 2s, 5s;
  animation-iteration-count: 1, 3, infinite;
}

که انیمیشن bounce به مدت 3s به طول می انجامد و 1 بار اجرا می شود و انیمیشن دوم 2s طول می کشد و 3 بار تکرار می شود و به همین ترتیب تا آخر مقادیر با هم ارتباط دارند.

در مثال زیر زمان برای دو انیمیشن rotate و fall تعیین شده است:

.element {
  animation-name: rotate, fall;
  animation-duration: .6s, .9s;
  animation-timing-function: ease-in-out, ease-out;
}

@keyframes rotate {
  /* فریم کلیدی اینجا تعریف می شوند */
}

@keyframes fall {
  /* فریم کلیدی اینجا تعریف می شوند */
}

در دموی زیر یک انیمیشن با سه مدت زمان متفاوت برای سه عنصر تعریف شده اند که در زمان hover کردن نگهدارنده اصلی اجرا می شوند:

See the Pen animation-duration by Mojtaba Seyedi (@seyedi) on CodePen.

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