CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS3 animation-duration 속성 CSS3 animation-delay 속성

CSS3 animation-direction 속성 사용 방법 및 예제

CSS 애니메이션-direction 속성은 애니메이션이 중간 반복에서 역방향으로 재생되어야 하는지 지정합니다。

다음 표는 이 속성의 사용 상황과 버전 기록을 요약합니다。

기본 값：	normal
적용됨：	모든 요소::before와::after pseudo 요소
thừa kế：	없음
애니메이션 가능성：	아니요。참조하십시오： 애니메이션 속성。
버전：	CSS3의 새 기능
JavaScript 문법：	object.style.animationDirection="역방향"

animation-direction 사용 문법

이 속성의 문법은 다음과 같습니다：

animation-direction: 정상적 | 역방향 | 중간 | 중간-reverse　|　initial　|　inherit

아래 예제는 animation을 사용하는 방법을 설명합니다.-direction 속성.

예제

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　4s;
　　　　-webkit-animation-iteration-count:　2;
　　　　-webkit-animation-direction:　alternate;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　4s;
　　　　animation-iteration-count:　2;
　　　　animation-direction:　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

테스트를 해보세요‹/›

주의:만약 애니메이션을 한 번만 재생할 것으로 설정하면 animation-direction 속성은 무효입니다. 참조하십시오animation-iteration-count속성。

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
normal	애니메이션은 각 주기에서 재생되어야 합니다. 이는 기본 값입니다.
reverse	애니메이션은 각 반복에서 후행으로 재생되어야 합니다.
alternate	애니메이션은 첫 번째 반복에서 전행으로 재생되고, 그 다음으로 후행으로 재생되고, 그 다음으로 반복하여 교차 재생합니다.
alternate-reverse	애니메이션은 첫 번째 반복에서 후행으로 재생되고, 그 다음으로 전행으로 재생되고, 그 다음으로 반복하여 교차 재생합니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 속성 계산 값을 사용하여 animation을 채택합니다.-direction。

브라우저 호환성

animation-direction 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

	파이어폭스 5+ ^-moz-，15 + 구글 크롬 4+ ^-webkit- 인터넷 익스플로러 10+ 애플 사파리 4+ ^-webkit- 오페라 12+ ^-o-，15+ ^-webkit-

더 읽기

다음 튜토리얼을 참조하십시오：CSS3애니메이션。

CSS3 animation-duration 속성 CSS3 animation-delay 속성