Animation

Make a change, inspect the result, and take the output into your project.

How to use this tool ↓

Animation

Animation Properties

Duration1s

Delay0s

Timing

Iteration

Direction

Fill Mode

Keyframes

Keyframe 0%

Time Position (%)0

X Offset0px

Y Offset0px

Scale1

Rotate0deg

Opacity1

Background Color

Presets

PREVIEW

Animate Me

css

.animated-element {
  animation-name: my-animation;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
}

css

@keyframes my-animation {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) scale(1) rotate(0deg);
    background-color: #3b82f6;
  }
  100% {
    opacity: 1;
    transform: translate(100px, 0px) scale(1) rotate(0deg);
    background-color: #3b82f6;
  }
}

A PRACTICAL GUIDE

Give motion a clear purpose

CSS animations connect a named set of keyframes to an element. They are useful for a loading indicator or a brief entrance effect, but movement should explain a change rather than compete with the content. Decide what the animation communicates before tuning its timing.

How to use this tool

Choose the properties you want to animate and define the starting and ending keyframes. Start with opacity or transform for a simple entrance.
Set duration, delay, easing, and repeat behavior. Use a single iteration for an entrance and repeat only when the motion communicates an ongoing state.
Copy both the @keyframes block and the animation declaration. Add an alternative for visitors who prefer reduced motion.

The example moves a panel only eight pixels while fading it in. The both fill mode applies the first frame during a delay and the final frame afterward. Content remains visible when the animation is disabled.

Read the reference documentation ↗

Example to try in your project

@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.panel { animation: enter 180ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}

Before you ship

Avoid leaving essential content invisible unless an animation completes. Continuous movement can distract visitors, and large changes to width or height can shift surrounding layout.

Explore a related tool