monks/animation_timing_function
The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.
It is often convenient to use the shorthand property {{cssxref(“animation”)}} to set all animation properties at once.
Values
pub const ease: #(String, String) - : Equal to `cubic-bezier(0.25, 0.1, 0.25, 1.0)`, the default value, increases in velocity towards the middle of the animation, slowing back down at the end.pub const ease_in: #(String, String) - : Equal to `cubic-bezier(0.42, 0, 1.0, 1.0)`, starts off slowly, with the speed of the transition of the animating property increasing until complete.pub const ease_in_out: #(String, String) - : Equal to `cubic-bezier(0.42, 0, 0.58, 1.0)`, with the animating properties slowly transitioning, speeding up, and then slowing down again.pub const ease_out: #(String, String) - : Equal to `cubic-bezier(0, 0, 0.58, 1.0)`, starts quickly, slowing down the animation continues.pub const jump_both: #(String, String) - : Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration.pub const jump_end: #(String, String) - : Denotes a right-continuous function, so that the last jump happens when the animation ends. This is the default.pub const jump_none: #(String, String) - : There is no jump on either end, effectively removing a step during the interpolation iteration. Instead, it holds at both the 0% mark and the 100% mark, each for 1/n of the duration.pub const jump_start: #(String, String) - : Denotes a left-continuous function, so that the first jump happens when the animation begins.pub const linear: #(String, String) - : Equal to `cubic-bezier(0.0, 0.0, 1.0, 1.0)`, animates at an even speed.pub fn raw(value: String) -> #(String, String)Enter a raw string value for animation-timing-function
pub const revert_layer: #(String, String)pub const step_end: #(String, String) - : Equal to `steps(1, jump-end)`> [!NOTE]> When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the {{cssxref("animation-name")}}s appear. For situations where the number of animations and `animation-*` property values do not match, see [Setting multiple animation property values](/en-US/docs/Web/CSS/Guides/Animations/Using#setting_multiple_animation_property_values).> [!NOTE]> `animation-timing-function` has the same effect when creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) as it does for regular time-based animations.