본문으로 건너뛰기
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.