CSS3 animation 속성

CSS3 animation 속성

animation 속성은 움직임을 상세하게 제어하는 속성을 의미합니다.

 

animation 관련 속성

속성	설명
animation	애니메이션 지정
animation-name	키 프레임을 지정함
animation-duration	애니메이션이 실행되는 시간을 지정함
animation-timing-function	키 프레임 간의 변화 정도를 지정함
animation-delay	애니메이션이 시작되기 전 대기 시간을 지정함
animation-iteration-count	애니메이션 반복 횟수를 지정함
animation-direction	키 프레임의 연결 방향을 지정함
animation-play-state	애니메이션 실행 상태를 지정함

 

키 프레임 지정

키 프레임은 애니메이션을 구성하는 움직임의 키가 되는 프레임을 의미하고, 각 프레임을 연결함으로써 동작이 완성되는 것을 의미합니다.

 

키 프레임을 지정하기 위해서는 @keyframe 명령어를 사용하고 키프레임 이름을 지정해 줍니다.

시작 프레임을 지정하기 위해서는 from 을 사용하고 종료 프레임을 지정하기 위해서는 to 를 사용합니다.

 

형식	@keyframes  이름 {       from  { 애니메이션 시작시의 상태 }       to  { 애니메이션 종료시의 상태 } }
예제	@-webkit-keyframes  testAnimation {       from  {width: 150px; background: pink;}       to {width: 300px; background: skyblue;} }

 

애니메이션 지정

animation-name 속성값 지정

값은 키 프레임을 정의할 때 지정한 키 프레임 이름을 지정해 줍니다.

 

animation-duration 속성값 지정

애니메이션이 실행되는 총 시간을 지정해 줍니다.

 

animation-iteration-count 속성값 지정

animation-iteration-count 속성을 사용하여 애니메이션의 반복 횟수를 지정할 수 있습니다.

만일 계속 실행하고 싶으면 infinite 값을 지정해 줍니다.

 

animation-direction 속성값 지정

animation-direction 속성은 키 프레임의 진행 방향을 지정할 때 사용하는 속성(normal 속성 지정)이며, 역방향으로도 애니메이션의 진행 방향을 연결하고자 한다면 alternate 값을 지정해 줍니다.

 

animation-play-state 속성값 지정

animation-play-state 속성은 애니메이션의 실행 상태를 지정하는 속성으로 일시 정지, 재시작을 위하여 running 값과 paused 값을 지정해 줍니다.

 

애니메이션 지정 예제

 

animation 속성을 사용하여 한 번에 지정

형식

animation:  animation-name 값   animation-duration 값   animation-timing-function 값                  animation-delay 값   animation-iteration-count 값    animation-direction 값

 

animation 속성 실습 프로그램

 

animation 을 정교하게 구간별(0%  30%  50%  80%  100%)로 나눠서 지정하는 실습 프로그램은 다음과 같습니다.