transition-timing-function
En esta página
| Clase | Propiedades CSS |
|---|---|
ease-linear |
transition-timing-function: linear; |
ease-in |
transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */ |
ease-out |
transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */ |
ease-in-out |
transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */ |
ease-initial |
transition-timing-function: initial; |
ease-(<custom-property>) |
transition-timing-function: var(<custom-property>); |
ease-[<value>] |
transition-timing-function: <value>; |
Examples#
Basic example#
Use utilities like ease-in and ease-out to control the easing curve of an element's transition:
{
ease-in
ease-out
ease-in-out
<!-- [!code classes:ease-in,ease-out,ease-in-out] -->
<button class="duration-300 ease-in ...">Button A</button>
<button class="duration-300 ease-out ...">Button B</button>
<button class="duration-300 ease-in-out ...">Button C</button>