animation-timing-function

از ویژگی animation-timing-function برای کنترل سرعت یک انیمیشن در گذر زمان, استفاده می شود. به بیان ساده تر عملیات انیمیشن می تواند با سرعت خیلی زیادی شروع شود و با یک سرعت آرام به اتمام برسد.

برای دانستن مقادیری که این ویژگی می تواند داشته باشد timing-function را بررسی کنید.

مثال:

.element {
  animation-name: bounce;
  animation-duration: 2s;
  animation-timing-function: ease-in;
}

@keyframes bounce {

  0% {
    top: 100px;
  }

  50% {
    top: 150px;
  }

  100% {
    top: 200px;
  }

}

در مثال بالا ویژگی animation-timing-function بر روی کل انیمیشن کنترل دارد. یعنی از نقطه شروع انیمیشن تا نقطه پایان آن.

اما می توان ویژگی animation-timing-function را در هر فریم کلیدی تغییر داد و این قابلیت, کار با انیمیشن ها را بسیار جالب تر می کند.

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 150px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px;
  }

}

با توجه به مثال, تغییرات از 0% تا 25% به صورت ease-out انجام می شود و از 25% تا 50% به صورت ease-in شکل می گیرد و همینطور تا آخر.

می توان این ویژگی را در یک خط برای چند انیمیشن بصورت همزمان مقدار داد:

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 1s, .3s, 500ms;
  animation-timing-function: ease-out, ease, linear;
}

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

تعیین این ویژگی در انیمیشن برای یک عنصر از طریق روش مختصر نویسی بوسیله ویژگی animation رایج و راحتر است.

در مثال زیر به دو عنصر انیمیشن اعمال شده است. با این تفاوت که ویژگی animation-timing-function در عنصر اول برای کل انیمیشن تنظیم شده است اما در عنصر دوم برای هر فریم کلیدی.

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

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