跳转到正文
Anim

CSS Animation Generator

Create keyframes in a GUI.

Keyframes

@keyframes fadeSlide {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(12px);
    opacity: 0.4;
  }
}

.animated {
  animation-name: fadeSlide;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: both;
}

关于CSS Animation Generator

Set name, duration, timing, iteration, and stops to get animation CSS. Everything runs in your browser.

使用方法

  1. Tune keyframes
  2. Check the preview
  3. Copy the CSS

常见问题

Free?

Yes.

Uploaded?

No.