animation-timing-function

Definition

In CSS, the animation-timing-function property is used to specify the speed curve of an animation. It determines how the animation progresses over time, and can be used to create different types of animation effects.

Examples

Linear animation - In this example, the animation-timing-function is set to linear, which means that the animation will progress at a constant rate.

.animated-element {
  animation: my-animation 5s linear infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Ease-in animation - In this example, the animation-timing-function is set to ease-in, which means that the animation will start slowly and then accelerate.

.animated-element {
  animation: my-animation 5s ease-in infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Ease-out animation - In this example, the animation-timing-function is set to ease-out, which means that the animation will start quickly and then decelerate.

.animated-element {
  animation: my-animation 5s ease-out infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Ease-in-out animation - In this example, the animation-timing-function is set to ease-in-out, which means that the animation will start slowly, accelerate

.animated-element {
  animation: my-animation 5s ease-in-out infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Values

Best Practices

• Use the animation-timing-function property in conjunction with the animation property to specify the timing of an animation.
• Use the linear, ease, ease-in, ease-out, or ease-in-out values to specify a predefined speed curve for the animation.
• Use the cubic-bezier function to define a custom speed curve for the animation.
• Use the animation-timing-function property in combination with other animation properties, such as animation-duration and animation-delay, to fine-tune the timing and behavior of the animation.
• Experiment with different timing functions to find the one that best suits your needs.
• Keep in mind that different timing functions can create very different effects, and can be used to achieve different types of animation styles.

Browser Compatibility