CSS3 animation 속성 사용 방법 및 예제

animation CSS 속성은 다음 속성의 줄임말 속성입니다animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode와animation-play-state。

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

animation 사용 문법

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

animation:　[　name　duration　timing-function　delay　iteration-count　direction　fill-mode　play-state　]　|　initial　|　inherit

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

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

속성 값

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

브라우저 호환성

animation 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다. 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

추가로 읽어보세요

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

관련 속성과 규칙:animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode，animation-play-state，@keyframes。