CSS Animation Generator

Generate keyframe animations with live preview.

Animation

Duration (s)

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

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

About CSS Animation Generator

This is a free, fast, and fully client-side css animation generator tool. All processing is done locally within your browser to ensure maximum privacy and security. No data is sent to our servers. Bookmark this page for quick access to ad-free, high-performance SEO and developer utilities.