CSS Library Logo

MotionCSS

Discover and download high-quality CSS animations to enhance your website's design.

Animation CSS

/* Select an animation to view its CSS */

Understanding CSS Keyframes

What Are Keyframes?

Keyframes in CSS allow you to define intermediary steps for animations, enabling smooth transitions between multiple states. By specifying styles at certain points (percentages) within the animation's duration, you can create complex animations.

@keyframes example {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

How to Use Keyframes

After defining keyframes, use the animation property to apply them to an element.

div {
  animation: example 2s ease-in-out infinite;
}

The animation shorthand consists of the following properties:

PropertyDescription
animation-nameThe name of the keyframes block.
animation-durationHow long the animation takes (e.g., 2s).
animation-timing-functionControls the speed curve (e.g., ease-in).
animation-delayDelay before starting the animation.
animation-iteration-countNumber of times to play (or infinite).
animation-directionNormal, reverse, alternate, etc.
animation-fill-modeDetermines the styles before and after the animation runs.
animation-play-stateRunning or paused.

Here is an example using all animation properties:

@keyframes exampleAnimation {
  0% { transform: translateX(0); opacity: 0; }
  50% { transform: translateX(100px); opacity: 0.5; }
  100% { transform: translateX(200px); opacity: 1; }
}

div {
  animation: exampleAnimation 2s ease-in-out 1s infinite alternate forwards;
  /* animation-name: exampleAnimation;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards; */
}

Common Settings

Here are some common settings for CSS animations:

CategoryValues
Timing Functionsease, linear, ease-in, ease-out, ease-in-out, and custom cubic-bezier values.
Directionsnormal (default), reverse, alternate, alternate-reverse.
Fill Modesnone, forwards, backwards, both.

Latest Blogs

Loading blogs...