✨

CSS Animation Generator

Pick from 16 animation presets. Customise duration, timing, delay, iterations and fill mode. Copy the @keyframes + animation CSS.

Preset
Timing
Playback
Fade In
Generated CSS
@keyframes fadeIn {
  from {
  opacity:0 }
to {
  opacity:1 }

}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}