#transition-timing-function

#Introduction

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.

#Examples

css-apisrc/transition-timing-function/App.tsx

Preview

#Syntax

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

transition-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);

#Values

• linear

• ease

• ease-in

• ease-out

• ease-in-out

• square-bezier()

• cubic-bezier()

Default : linear

#Formal definition

#Formal syntax

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|square-bezier()|cubic-bezier();

#More

• transition-delay
• transition-duration
• transition
• transition-timing-function
• Animation Event

#Compatibility