Style animation 속성

정의와 사용법

animation 속성은 다섯 가지 애니메이션 속성의 간추린 속성입니다:

주의事项:항상 정의해야 합니다. animationDuration 속성그렇지 않으면 지속 시간은 0이며, 영원히 재생되지 않습니다.

예제

div 요소의 애니메이션을 간추린 속성으로 변경합니다:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

직접 시도해 보세요

문법

animation 속성 반환:

object.style.animation

animation 속성 설정:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

속성 값

값 설명
animationName 선택자에 바인딩된 중요한 프레임의 이름을 정의합니다.
animationDuration 애니메이션이 완료되는 데 필요한 초 또는 밀리초를 정의합니다.
animationTimingFunction 애니메이션의 속도 곡선을 정의합니다.
animationDelay 애니메이션이 시작하기 전의 지연 시간을 정의합니다.
animationIterationCount 애니메이션이 재생되어야 하는 횟수를 정의합니다.
animationDirection 애니메이션이 교차 반복에서 역방향으로 재생되어야 하는지 정의합니다.
animationFillMode 애니메이션이 실행 시간 이외에 적용되는 값을 정의합니다.
animationPlayState 애니메이션이 실행 중인지 멈춘 상태인지 정의합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial.
inherit 부모 요소에서 이 속성을 상속합니다. 참조하십시오 inherit.

기술 세부 사항

기본 값: none 0 ease 0 1 normal none running
반환 값: 문자열로 요소의 animation 속성.
CSS 버전: CSS3

브라우저 지원

animation CSS3 (1999) 기능입니다.

모든 브라우저가 완전히 지원합니다:

크롬 에지 파이어폭스 사파리 오페라 IE
크롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 11

관련 페이지

CSS 참조 매뉴얼:animation 속성