CSS Animation Builder | Federico Calò

Configurazione Animazione

Nome animazione

Durata

Ritardo

Timing function

Iterazioni

Direction

Fill mode

Keyframes

Aggiungi keyframe a:

translateX(0)

translateX(100px)

Anteprima Live

Animated

CSS Generato

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

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

All Tools

Come utilizzare CSS Animation Builder

Configure basic animation parameters

Set the animation name, duration, start delay, number of iterations, direction, and fill mode. The name becomes the identifier used in the CSS animation-name property.

Choose a timing function

Choose how the animation accelerates and decelerates over time: ease, linear, ease-in, ease-out, ease-in-out or a custom cubic-bezier curve. The timing function determines the "feel" of the animation.

Modify Keyframes Visually

Select every keyframe (0%, 50%, 100% etc.) and set your CSS properties: transform (translate, scale, rotate), opacity, color, and background color. The live preview updates in real-time.

Copy your generated CSS code

CSS block with the @keyframes rule and animation properties is automatically generated. Copy the code and paste it into your stylesheet. Compatible with all modern browsers (Chrome, Firefox, Safari, Edge).

Suggerimenti

Use only your own transform and opacity properties in keyframes for performant animations: these properties are animated by the browser's composer thread without causing a reflow or repaint, ensuring 60fps even on mobile devices.
Set "animation-fill-mode: both" if you want the element to be invisible before the start of the animation (e.g., fade-in with delay): avoid the flash of the element at its initial position/opacity during the delay.
Use "animation-iteration-count: infinite" with caution: infinite animations consume more energy on mobile and can distract users; consider stopping them after a few iterations or using hover-triggered animations.

Domande frequenti

What does property fill-mode do in CSS?

Forwards maintains the style of the last keyframe at the end of the animation. Backwards applies the style of the first keyframe during delay. Both combines the two behaviors. None (default) returns the element to its original style before and after the animation.

What is a cubic-bezier curve and when should you use it?

Concise curve definition using cubic-bezier defines a custom interpolation curve through 4 values (P1x, P1y, P2x, P2y). Use cubic-bezier to create timing functions that predefined keyframes cannot express, such as bounce or non-standard accelerations.

Which browser supports CSS animations?

All animations CSS (@keyframes + animation) generated by this tool are supported by all modern browsers: Chrome 43+, Firefox 16+, Safari 9+, Edge 12+. No -webkit- prefix is needed for current browsers, but it's recommended for IE11 and older versions of Safari.

How can I get accessible animations and respect prefers-reduced-motion?

Add a CSS media query "@media (prefers-reduced-motion: reduce)" that sets "animation: none" or reduces duration. This respects user preferences for individuals with vestibular disorders. Safe are purely decorative animations like fades and scales; avoid fast-moving or flashing animations.

Animation Settings