애니메이션(Animation)

 

 

동적인 움직임.

ex) 로딩할 때 간단한 애니메이션 보여주는 용도로도 쓰임.

 

Animation

-키프레임 정의 : 사용할 애니메이션 정의

            /* 변수명 */
@keyframes animationname { /* 단위별로 변경값-크기, 위치, 색상 등을 지정해 애니메이션 설정 */
    0% { 시작값 } /* 필수 입력. 0% 대신 from 사용 가능 */
    25% { 변경값 }
    50% { 변경값 }
    75% { 변경값 }
    100% { 종료값 } /* 필수 입력. 100% 대신 to 사용 가능 */
}

그리고 그 애니메이션을 줄 태그에 속성값 설정

tag {
    position:static; /* 기본값인데 이 상태에선 위치 이동 설정 안 먹힘. relative, absolute 등을 설정*/
    animation: name duration timing-function delay iteration-count direction fill-mode play-state
            /*이름*//*시간*//*시작·끝 타이밍*//*시작 지연*//*재생횟수*//*방향설정*//*…*//*재생 상태 설정*/
}

 

2. 애니메이션 속성 종류

(1) animation-direction : 방향 설정

tag { animation-direction:normal; }
                          /* 기본값 */

normal	reverse	alternate	alternate-reverse
순방향 재생(기본값)	역방향 재생	양방향 재생 홀수(순방향), 짝수(역방향)	양방향 재생 홀수(역방향), 짝수(순방향)

 

 

(2) animation-iteration-count : 반복 재생 횟수 설정

tag { animation-interation-count:1; } /* 기본값 */
      /* 정수(1~ ), infinite(반복)*/

 

 

(3) animation-timing-function : 시작과 끝 타이밍 지정

tag { animation-timing-function:linear; }

linear	ease	ease-in	ease-out	ease-in-out
일정한 속도	빠르게 시작했다 느려	점점 빨라짐	점점 느려짐

 

 

(4) animation-play-state : 재생 상태 설정

tag { animation-play-state:running; } /* 애니메이션 재생 */
tag { animation-play-state:paused; } /* 애니메이션 일시정지 */

 

 

(5) animation-fill-mode

애니메이션을 재생하고 있지 않을때 설정