한양과학기술고등학교

에듀테크 프로젝트 대시보드

@keyframes 애니메이션

CSS 예제 15 / 20

transition 이 '2점 사이 변화'라면, @keyframes 애니메이션은 여러 단계를 자동/반복으로 재생합니다.

@keyframes animation infinite
실시간 반영
결과 화면
💡 이렇게 바꿔보세요
  • 0%/50%/100% (또는 from/to) 로 중간 단계를 원하는 만큼 만들 수 있어요
  • animation: 이름 시간 타이밍함수 반복횟수; — infinite 는 무한 반복
  • animation-direction: alternate 를 추가하면 갔다 왔다를 자연스럽게 반복해요
← CSS 예제 목록