For AI agents: the complete documentation index is available at /next/llms.txt, the full documentation bundle is available at /next/llms-full.txt, and this page is available as Markdown at /next/api/css/properties/animation-timing-function.md.
Lynx
  • English

      • 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
      Code
      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.