CSS-Zone

Animation Generator

Ready-to-use CSS animation patterns with live preview, HTML and styles you can copy in one click.

HTML + CSSLive previewKeyframes ready
Back to homeAnimation docs

Generator

Build your own animation

Tune duration, easing, distance, scale, and opacity. Copy ready-to-use keyframes and CSS below.

Controls

Preview

CSS Motion

Code

Code view
<div class="motion-preview">
  <div class="motion-preview__dot"></div>
  <div class="motion-preview__card">CSS Motion</div>
</div>

.motion-preview {
  --motion-start-x: -24px;
  --motion-end-x: 24px;
  --motion-start-y: -16px;
  --motion-end-y: 16px;
  --motion-start-scale: 0.96;
  --motion-end-scale: 1.06;
  --motion-start-opacity: 0.72;
  --motion-end-opacity: 1;
  --motion-start-rotate: 0deg;
  --motion-end-rotate: 6deg;
  --motion-start-skew-x: 0deg;
  --motion-end-skew-x: 4deg;
  --motion-start-skew-y: 0deg;
  --motion-end-skew-y: 2deg;
  --motion-duration: 1200ms;
  --motion-delay: 0ms;
  --motion-easing: cubic-bezier(0.3, 0.8, 0.4, 1);
  --motion-iterations: infinite;
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 160px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(104, 185, 255, 0.14), #0b1120);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.motion-preview__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7dd3fc;
  animation: css-zone-motion var(--motion-duration) var(--motion-easing) var(--motion-delay) var(--motion-iterations) alternate;
}

.motion-preview__card {
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  font-weight: 600;
  animation: css-zone-motion var(--motion-duration) var(--motion-easing) var(--motion-delay) var(--motion-iterations) alternate;
}

@keyframes css-zone-motion {
  0% {
    transform: translate(var(--motion-start-x), var(--motion-start-y)) rotate(var(--motion-start-rotate)) skew(var(--motion-start-skew-x), var(--motion-start-skew-y)) scale(var(--motion-start-scale));
    opacity: var(--motion-start-opacity);
  }
  100% {
    transform: translate(var(--motion-end-x), var(--motion-end-y)) rotate(var(--motion-end-rotate)) skew(var(--motion-end-skew-x), var(--motion-end-skew-y)) scale(var(--motion-end-scale));
    opacity: var(--motion-end-opacity);
  }
}

Snippets

Animation examples with code

Copy HTML + CSS together and plug in as a starting point or micro-motion for your UI.

HTML + CSS
Showing 41 of 41 animations

Preview

Triple spinner

Three layered rings rotating with offset speeds.

Open example

Preview

Pulse cubes

Four tiles scaling in sequence.

Open example

Preview

Dashed ring

Dual dashed circles spinning in opposite directions.

Open example

Preview

Beam sweep

Shimmering beam sliding across a track.

Open example

Preview

Stack bounce

Stacked bars lifting one by one.

Open example

Preview

Clock loader

Two clock hands spinning independently.

Open example

Preview

Pulse grid

Grid of squares pulsing diagonally.

Open example

Preview

Wave orb

Radiating ring around a glowing orb.

Open example

Preview

Dot typing loader

Three dots hopping like a typing state.

Open example

Preview

Beat grid

Compact grid pulsing in a rhythm.

Open example

Preview

Running line

Endless accent stripe — good for banners, status bars or promo blocks.

CSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-readyCSS Motion · Microcopy · Live preview · Copy-ready
Open example