ویژگی animation-timing-function در CSS

animation-timing-function Property

ویژگی animation-timing-function در CSS نوع پیشرفت در روند اجرای انیمیشن در طول هر دور تکرار را مشخص می کند.

نحوه نوشتار

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

مقادیر

تابع زمانبندی یا timing-function مطابق با نامی که به ویژگی animation-name داده میشود، کار می کند.
مقادیر با کلیدواژه (ease, linear, ease-in, …)، هرکدام تابع cubic bezir را با مختصات خود فراخوانی می کند.

ease​

برابر است با cubic-bezier(0.25, 0.1, 0.25, 1.0)، شدت حرکت را تا میانه راه افزایش  و پس از آن کاهش می دهد.

linear​

برابر است با cubic-bezier(0.0, 0.0, 1.0, 1.0).

ease-in​

برابر است با cubic-bezier(0.42, 0, 1.0, 1.0). شدت حرکت به آرامی شروع می شود و رفنه رفته تا پایان اجرا افزایش میابد.

ease-out​

برابر است با cubic-bezier(0, 0, 0.58, 1.0). با سرعت شروع میشود و رفته رفته شدت انیمیشن کاهش میابد.

ease-in-out​

برابر است با  cubic-bezier(0.42, 0, 0.58, 1.0). ابتدا با سرعت کم شروع به اجرای ویژگیهای انیمیشن می کند، سرعتش افزایش میابد و سپس از سرعتش کاسته می شود.

در مثال زیر نحوه عملکرد هر تابع را بصورت نمودار پیشرفت می بینیم:

html

<div class="parent"> 
   <div class="ease">ease</div>
   <div class="easein">ease-in</div>
   <div class="easeout">ease-out</div>
   <div class="easeinout">ease-in-out</div>
   <div class="linear">linear</div>
   <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div>
</div>

css

.parent > div[class] {
   animation-name: changeme;
   animation-duration: 10s;
   animation-iteration-count: infinite;
   margin-bottom: 4px;
}
.ease {
   animation-timing-function: ease;
}
.easein {
   animation-timing-function: ease-in;
}
.easeout {
   animation-timing-function: ease-out;
}
.easeinout {
   animation-timing-function: ease-in-out;
}
.linear {
   animation-timing-function: linear;
}
.cb {
   animation-timing-function: cubic-bezier(0.2,-2,0.8,2);
}
@keyframes changeme {
   0% {
        min-width: 12em;
        width: 12em;
        background-color: black;
        border: 1px solid red;
        color: white;
      }
      100% {
          width: 90vw;
          min-width: 24em;
          background-color: magenta;
          color: yellow;
          border: 1px solid orange;
      }
}

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

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