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