Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

animation-timing-function

Introduction

animation-timing-function property specifies how an animation progresses through each cycle. It can accept one or more timing functions.

Examples

css-apisrc/animation-timing-function/App.tsx
Preview

Syntax

/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);

/* Multiple animations */
animation-timing-function: ease, steps(5, end), cubic-bezier(0.1, 0.7, 1, 0.1);

Formal definition

Initial valuelinear
Applies toall elements
Inheritedno
Animatableno

Formal syntax

/*default value: linear*/
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out |
  <timing-function>;

See also

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.