CSS Animations Interactive Exercise

Instructions

Use the controls below to create your own CSS animations. Adjust the properties and see your animation in real-time!

CSS animations allow you to gradually change from one style to another without using JavaScript. You can control:

Animation Name: The name of the @keyframes animation
Duration: How long the animation takes to complete one cycle
Timing Function: How the animation progresses through time (ease, linear, etc.)
Delay: How long to wait before starting the animation
Iteration Count: How many times the animation should repeat
Direction: Whether the animation should alternate or reset and repeat
Fill Mode: What values are applied before/after the animation

Animation Controls

Animation Type:

Start Keyframe (0%):

Middle Keyframe (50%):

End Keyframe (100%):

Duration (seconds): 2s

Timing Function:

Delay (seconds): 0s

Iteration Count:

Direction:

Fill Mode:

Animate Me

.element {
  animation: custom-animation 2s ease 0s infinite normal none;
}

@keyframes custom-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

Predefined Animation Examples

Click on any example to apply it to the animation playground:

Bounce

Pulse

Shake

Spin

Fade

Slide