CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS3 animation-play-state 속성 CSS3 animation-iteration-count 속성

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

의 animation-nameCSS 속성이 지정한 이름 @keyframes는 선택된 요소에 애니메이션을 정의하기 위해 적용되어야 합니다.

이 표는 이 속성의 사용 환경과 버전 이력을 요약합니다.

기본 값:	none
적용 대상:	모든 요소::before와::after pseudo-element
thừa kế:	아니요
애니메이션 가능:	아니요。보기: 애니메이션 속성。
버전：	CSS3의 새 기능
JavaScript 문법:	object　　　object.style.animationName="mymove"

animation-name 사용 문법

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

animation-name:　keyframe-name　|　none　|　initial　|　inherit

다음 예제는 animation을 사용하는 방법을 보여줍니다.-name 속성.

예제

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

테스트를 해보세요‹/›

속성 값

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

값	설명
keyframe-name	선택자에 바인딩할 주요 프레임의 이름을 지정합니다.
none	아니메이션을 지정하지 않습니다. 이는 캐시에 저장된 모든 애니메이션을 덮거나 비활성화하는 데 사용될 수 있습니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 animation을 사용합니다.-name 속성의 계산 값.

브라우저 호환성

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

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

추가로 읽기

다음 튜토리얼을 참조하세요:CSS3애니메이션。

CSS3 animation-play-state 속성 CSS3 animation-iteration-count 속성