CSS 애니메이션 생성기

복잡한 Keyframes 코드를 외울 필요 없이, 눈으로 보면서 효과를 만들고 복사하세요.

애니메이션 종류

지속 시간 (Duration): 1s

가속도 (Timing Function)

지연 시간 (Delay): 0s

반복 횟수 (Iteration Count)

✨

CSS Code

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

.animate-bounce {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  /* animation-fill-mode: forwards; // for one-off animations */
}