애니메이션 - Animation

■ 애니메이션 (Animation) 기본

○ 애니메이션 정의

애니메인션은 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시킴

애니메이션은 애니메이션을 나타내는 CSS 스타일과

애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.

 

○ 애니메이션 하위 속성

- animation-name : 중간 상태를 지정, 중간 상태는 @keyframes 규칙 이용

 

- animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정

 

- animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행

 

- animation-delay : 로드 되고 얼마만큼의 시간이 지난 후 실행될지 설정

 

- animation-iteration-count : 애니메이션이 몇 번 반복될지 지정. infinite은 무한히 반복

 

- animation- direction : 애니메이션이 종료 후 다시 처음부터, 역방향으로 진행 설정

 

- animation-fill-mode : 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

 

- animation-play-state : 멈추거나 다시 시작

 

 

○ 애니메이션 속기형 작성

- 순서는 크게 문제는 안되지만 duration, delay는 기본 앞이 duration, 뒤에 작성시 delay 임

animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];

 

 

- 실제 사용법 (순서대로 작성하는 것을 기본으로 한다. )

div{
    animation: abc 3s linear infinite  ;
}
div{
    animation: linear infinite 3s abc;
    /*          타이밍, 개수,  시간, 이름    */
}

 

 

○ 애니메이션 @keyframes 사용

CSS 애니메이션과 트랜지션 방식의 주된 차이는 @keyframes rule에 있다.

이 rule을 사용하면 애니메이션의 흐름(sequence) 중의

여러 시점(breakpoint)에서 CSS 프로퍼티값(속성값)을 지정할 수 있다.

 

- from, to 키워드를 사용하여 애니메이션의 시작과 끝 시점을 정의함

- from, to 키워드 대신 %를 사용가능

@keyframes name{ /* 최초 왼쪽 여백을 0% 지정, 종료시 왼쪽 여백 -100% 지정 */
    from{ margin-left: 0%; }
    to{ margin-left: -100%; }
}

@keyframes name{  /* 50%를 지날때 왼쪽 여백을 -100% 지정, 0%, 100%일때는 왼쪽 여백 0% */
    50%{ margin-left: -100%; }
}

 

 

 

■ 애니메이션 속성(property)별 작성요령

○ animation-name

- @keyframes 뒤에 애니메이션을 대표하는 임의의 이름를 부여하는 형태

- animation-name 프로퍼티값으로 지정하여 사용하고자 하는 @keyframes rule을 선택

- 하나 이상의 애니메이션 이름을 지정할 수 있다.

div{ /* 한개의 이름을 지정 */
    animation-name: move;
}


div{ /* 여러개의 이름을 지정 */
    animation-name: move, fadeOut, changeColor;
}

 

- 유효한 이름

문자열 시작하는 이름, _(언더바)로 시작, - (하이픈)으로 시작

div{
    animation-name: name; /* 문자열로 시작하는 이름 */
    animation-name: _name; /* 언더바(_)로 시작하는 이름 */
    animation-name: -name; /* 하이픈(-)으로 시작하는 이름 */
}

 

- 유효하지 않은 이름

숫자로 시작, 특수문자 시작

div{
    animation-name: 1name; /* 숫자로 시작하는 이름 */
    animation-name: @name; /* 특수 문자로 시작하는 이름 */
}

 

- 화면확인

 

 

 

○ animation-duration

- 애니메이션 프레임의 지속시간을 지정

- 지속 시간은 애니메이션이 시작하고 종료하는 데 걸리는 시간 의미

- 단위는 밀리초 ms, 초 s로 지정함

- 지정하지 않는 경우 기본값 0s가 셋팅되어 어떠한 애니메이션도 실행 되지 않음

 

 

 

○ animation-timing-function

- 애니메이션 효과를 위한 수치 함수를 지정

- ease : 기본, 느리게 시작하여 점점 빨라졌다가 느려지면서 종료

- linear : 동일한 속도로 운동

- ease-in : 느리게 시작 한 후 등속 운동

- ease-out : 등속시작해서 느리게 종료

- ease-in-out : ease와 유사

 

 

 

○ animation-delay

- 요소가 로드된 시점과 애니메이션이 실제로 시작하는 사이에

대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정

 

 

 

○ animation-iteration-count

- 애니메이션 주기의 재생 횟수를 지정

- 기본값은 1이며 infinite로 무한반복

 

 

 

○ animation-direction

- 애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정

- normal : 기본값으로 진행

- reverse : 역순으로 진행(100->0%)

- alternate : 홀수는 normal, 짝수는 reverse로 진행

- alternate-reverse : 홀수는 reverse, 짝수는 normal로 진행