Transitions And Animations

transition-timing-function

Name: Fynydd
Address: 630 Freedom Business Center Drive, King of Prussia, Pennsylvania, 19406, United States
Telephone: +1 855-439-6933
Rating: 4.9

Utilities for setting the timing function for transitions and animations.

Quick reference

Class Styles

ease-linear

--sf-ease: linear;
transition-timing-function: linear;

ease-initial

--sf-ease: initial;
transition-timing-function: initial;

ease-in

--sf-ease: var(--ease-in);/* cubic-bezier(0.4, 0, 1, 1) */
transition-timing-function: var(--ease-in);/* cubic-bezier(0.4, 0, 1, 1) */

ease-out

--sf-ease: var(--ease-out);/* cubic-bezier(0, 0, 0.2, 1) */
transition-timing-function: var(--ease-out);/* cubic-bezier(0, 0, 0.2, 1) */

ease-in-out

--sf-ease: var(--ease-in-out);/* cubic-bezier(0.4, 0, 0.2, 1) */
transition-timing-function: var(--ease-in-out);/* cubic-bezier(0.4, 0, 0.2, 1) */

ease-<number>

--sf-ease: <number>;
transition-timing-function: <number>;

ease-250

--sf-ease: 250;
transition-timing-function: 250;

ease-[<value>]

--sf-ease: <value>;
transition-timing-function: <value>;

ease-[250ms]

--sf-ease: 250ms;
transition-timing-function: 250ms;

ease-(<custom-property>)

--sf-ease: var(<custom-property>);
transition-timing-function: var(<custom-property>);

ease-(--my-duration)

--sf-ease: var(--my-duration);
transition-timing-function: var(--my-duration);

ease-(duration:<custom-property>)

--sf-ease: var(<custom-property>);
transition-timing-function: var(<custom-property>);

ease-(duration:--my-duration)

--sf-ease: var(--my-duration);
transition-timing-function: var(--my-duration);

transition-property

color

Transitions And Animations

transition-timing-function

Quick reference

Sfumato

Community