CSS Animation Presets

animation-name: References the @keyframes rule
animation-duration: How long the animation takes
animation-timing-function: Easing (ease, linear, etc.)
animation-iteration-count: How many times to repeat

Ready-to-use CSS animation code. Preview, copy, and paste into your projects instantly.

Animation

CSS Code

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

.element {
  animation: bounce 1s ease infinite;
}

CSS Animation Presets

CSS Animation Properties

Animation Tools