CSS animation 속성

정의와 사용법

animation 속성은 여섯 개의 애니메이션 속성을 설정하는 단축 속성입니다:

주석:항상 지정하십시오: animation-duration 속성이 없으면 시간이 0이 되어 애니메이션이 재생되지 않습니다.

HTML DOM 참조 가이드:animation 속성

단축 속성을 사용하여 애니메이션을 div 요소에 바인딩하세요:

div
{
animation:mymove 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

값	설명
animation-name	선택자에 바인딩할 필요 있는 keyframe 이름을 정의합니다.
animation-duration	애니메이션을 완료하는 데 걸리는 시간을 초 또는 밀리초로 정의합니다.
animation-timing-function	애니메이션의 속도 곡선을 정의합니다.
animation-delay	애니메이션 시작 전의 지연 시간을 정의합니다.
animation-iteration-count	애니메이션이 재생되어야 할 횟수를 정의합니다.
animation-direction	애니메이션을 반복적으로 역방향으로 재생할지 여부를 정의합니다.
animation-fill-mode	애니메이션이 실행 시간 이외에 적용되는 값을 정의합니다.
animation-play-state	애니메이션이 실행 중인지 중지된지 정의합니다.

기본값:	none 0 ease 0 1 normal
상속성:	no
버전:	CSS3
JavaScript 문법:	object.style.animation="mymove 5s infinite"

표에서의 숫자는 이 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다.

)-webkit-、)-moz- 또는 )-o-를 포함한 숫자는 프리퍼스를 사용하는 최초 버전을 나타냅니다.

크롬	IE / 엣지	파이어폭스	사파리	오페라
크롬	엣지	파이어폭스	사파리	오페라
43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-