Take Your Animations Further

Explore keyframe tricks, 3D transforms, animation timelines, and interactive controls.

Dynamic Keyframes with CSS Variables

@keyframes spin{
  from{transform:rotate(var(--rotate))}
  to{transform:rotate(calc(var(--rotate) + 360deg))}
}
.demo{
  --duration:4s;
}

3D Transform Animations

@keyframes flip{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(360deg)}
}
.demo{
  perspective:600px;
}

Animation Timeline Controls

@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}
#timelineBox{
  animation-timing-function:ease-in-out;
}

Live Playground