예
A와 애니메이션을 결합 <div> 약식 속성을 사용하여 요소 :
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
»그것을 자신을 시도 정의 및 사용
애니메이션 속성은 애니메이션 속성의 팔에 대한 약식 속성이다 :
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note: 항상 애니메이션 지속 시간의 속성을 지정, 그렇지 않으면 기간이 0이고, 재생되지 않습니다.
| 기본값: | none 0 ease 0 1 normal none running |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.animation="mymove 5s infinite" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
숫자는 -moz-, -webkit- 다음에, 또는 접두어와 함께 일 첫 번째 버전을 지정 -O-.
| 재산 | |||||
|---|---|---|---|---|---|
| animation | 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- |
CSS 구문
animation:name duration timing-function delay iteration-count
direction fill-mode play-state;속성 값
| 값 | 기술 |
|---|---|
| animation-name | 당신은 선택에 바인딩 키 프레임의 이름을 원하는 지정 |
| animation-duration | 애니메이션을 완료하는 데 걸리는 초 또는 밀리 초 단위로 지정 |
| animation-timing-function | 애니메이션 속도 곡선을 지정 |
| animation-delay | 애니메이션이 시작하기 전에 지연 지정 |
| animation-iteration-count | 애니메이션은 재생 횟수를 지정 |
| animation-direction | 애니메이션이 다른 사이클에 반대 방향으로 재생할지 여부를 지정합니다 |
| animation-fill-mode | 어떤 값을하는 것은 그것이 실행되는 시간 밖에 애니메이션에 의해 적용되는 지정 |
| animation-play-state | 애니메이션이 실행 중이거나 일시 정지 여부를 지정합니다 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
관련 페이지
CSS3 튜토리얼 : CSS3 애니메이션
HTML DOM 참조 : animation property