CSS 애니메이션 타임라인

1. 애니메이션 설정

키프레임을 편집하세요.

2. 키프레임

0%와 100%는 고정입니다. 각 easing은 현재 프레임에서 다음 프레임까지 적용됩니다. 최대 20개 프레임을 사용할 수 있습니다.

3. 재생과 시간 이동

재생 버튼은 처음부터 한 번 재생합니다. 슬라이더는 선택한 시점에 일시 정지합니다.

4. CSS와 편집 파일

.your-element 선택자를 실제 대상에 맞게 바꾸세요. 무한 반복을 사용하면 마지막 상태에 머무르지 않습니다.

@keyframes teck-tani-motion {
  0% {
    transform: translate(-80px, 0px) rotate(-12deg) scale(0.75);
    opacity: 0.2;
    background-color: #2563eb;
    animation-timing-function: ease-out;
  }
  45% {
    transform: translate(15px, -30px) rotate(12deg) scale(1.2);
    opacity: 1;
    background-color: #8b5cf6;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #14b8a6;
  }
}

.your-element {
  animation: teck-tani-motion 1800ms linear 1 normal both;
}

@media (prefers-reduced-motion: reduce) {
  .your-element {
    animation: none;
    transform: translate(0px, 0px) rotate(0deg) scale(1);
    opacity: 1;
    background-color: #14b8a6;
  }
}