최신 웹 개발 튜토리얼
 

Style animation Property

<스타일 개체

a의 애니메이션 변경 <div> 약식 속성을 사용하여 요소를 :

// Code for Chrome, Safari and Opera
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";

// Standard syntax
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
»그것을 자신을 시도

정의 및 사용

애니메이션 속성은 애니메이션 속성의 여섯위한 약식 속성이다 :

animationName
animationDuration
animationTimingFunction
animationDelay
animationIterationCount
animationDirection

Note: 항상 animationDuration 속성을 지정, 그렇지 않으면 기간이 0이고, 재생되지 않습니다.


브라우저 지원

테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

웹킷, 모즈, 또는 O 뒤에 숫자는 접두사와 함께 일 첫 번째 버전을 지정합니다.

재산
animation 43.0
4.0 웹킷
10.0 16.0
5.0 모즈
4.0 웹킷 30.0
15.0 웹킷
12.1
12.0 -O-

참고 : 크롬, 사파리와 오페라의 방법은 WebkitAnimation 속성을 지원합니다.


통사론

애니메이션 속성을 반환합니다 :

object .style.animation

애니메이션 속성을 설정합니다 :

object .style.animation=" 속성 값
기술
animationName 당신은 선택에 바인딩 키 프레임의 이름을 원하는 지정
animationDuration 애니메이션이 완료하는 데 걸리는 몇 초 또는 밀리 초 단위로 지정
animationTimingFunction 애니메이션 속도 곡선을 지정
animationDelay 애니메이션이 시작하기 전에 지연 지정
animationIterationCount 애니메이션이 재생 횟수를 지정합니다
animationDirection 애니메이션이 대체 사이클에 반대 방향으로 재생할지 여부를 지정합니다
animationFillMode 어떤 것은 값이 실행 시간 밖에 애니메이션으로인가 지정
animationPlayState 애니메이션이 실행 중이거나 일시 정지 여부를 지정합니다
initial 기본값으로이 속성을 설정합니다. 초기 읽기에 대한
inherit 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기

기술적 세부 사항

기본값: 없음 0 용이성 0 1 정상적인 없음 실행
반환 값 : 요소의 애니메이션 속성을 나타내는 문자열
CSS 버전 CSS3

관련 페이지

CSS 참조 : animation property


<스타일 개체