CSS 애니메이션 빌더

타임라인 에디터로 키프레임 애니메이션을 만들어보세요

설정

애니메이션 이름

지속 시간

지연 시간

반복 횟수

방향

타이밍 함수

채움 모드

타임라인

0%25%50%75%100%

키프레임 위치 0%

키프레임 위치 100%

프리셋

미리보기

현재 설정으로 미리보기

@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg) translateX(0px) translateY(0px);
  }
}

.animated-element {
  animation: myAnimation 2s ease infinite both;
}