<HTML5+CSS3> 애니메이션 속성

애니메이션 속성

트랜지션 속성: 한 스타일에서 다른 스타일로 바뀔 때 진행 시간을 지정해 변화.

애니메이션속성: 트랜지션보다 애니메이션을 더 쉽게 만들 수 있다.

animation속성과 transition 속성

-이 속성은 트랜지션속성과 비슷한 점이 많다. 시작 스타일과 끝나는 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변화하는 애니메이션 효과를 만들어 낸다.

 

%애니메이션과 트랜지션의 공통점과 차이점

공통점 : 애니메이션에 소요되는 시간이나 지연시간 등 지정

차이점 : 애니메이션의 시작에서부터 끝날 EO까지 어느 지점이는 @keyframe속성을 사용해 애니메이션 정의 가능

 

animation-duration속성 – 애니메이션 실행 시간

-이 속성은 애니메이션을 얼마 동안 재생할 것인지 설정합니다.값으로는 초나 밀리초(ms)로 표시한 시간 값입니다. 기본 값은 0입니다. 지정하지 않으면 애니메이션 효과 X

ex) animation-duration:1s;

 

animation-name속성

-@keyframe속성을 이용해 여러개의 애니메이션을 정의할 수 있다. 이때 특정 요소에 어떤 애니메이션을 적용할 것인지 정의하는 속성이 animation-name 속성입니다.

 

예를 들어, @keyframe속성을 이용해 ani라는 애니메이션을 지정했다면 그 애니메이션을 사용할 때 다음과 같이 합니다.

ex) animation-name:ani; -> ani라는 애니메이션 정의

 

 

@keyframes 속성을 이용해 애니메이션을 정의할 때 (두가지 이상 형태로 정의)

<<애니메이션이 시작할 상태와 끝날 때의 상태 설정해야 한다>>

why ??

-> 그래야 자연스럽게 애니메이션을 만들 수 있다.

상태 스타일을 정의할 때 애니메이션   시작할때의 상태는 0%   , 시작에서 끝날 때 까지를 100%

 0 % 스타일:form

100%스타일:to                     

라는   키워드를 사용한다.

 

ex) <style>

(1) @keyframes myani {

 0% { left : 10 px }   -> 시작할 때 x 좌표 위치 10 px

100% { left : 500px}  -> 끝날때 x 좌표 위치 500px

}

또는 (둘 중 한 가지 사용)

(2)  @keyframes myani {

from { left : 10px; }

to {left 500px ; }

    이렇게 설정해주면 된다

animation-iteration-count속성 – 반복 횟수 지정하기

-애니메이션은 기본적으로 한 번만 실행하고 끝난다. 경우에 따라 애니메이션을 반복해야 할 경우가 있는데, 그때 이 속성을 사용해 반복 횟수를 지정할 수 있다.

 

속성 값

(1)infinite : 반복 횟수를 무한으로 설정

 

ex) animation-iteration-count:infinite; ->애니메이션 반복 횟수 무제한 반복

 

animation-direction 속성 – 애니메이션 반대 방향으로 실행하기

-한쪽 방향으로 애니메이션이 실행되고 나면 기본으로 원래 위치로 돌아가지만, 이 속성을 이용하면 애니메이션의 방향을 조절할 수 있습니다.

 

속성 값

(1) normal : 원래 위치로 돌아오는 기본 값

(2) alternate : 애니메이션을 실행했던 반대 방향으로 애니메이션을 역 실행

 

animation 속성 – 애니메이션 관련 속성 한꺼번에 표기하기

-이 속성을 사용할 때 animation-duration 속성은 반드시 표기해야 한다. 애니메이션 실행 시간을 지정하지 않으면 기본 값 0이 적용되어 애니메이션 효과를 볼 수 없다.

속성 값

(1) name : 선택한 요소에 적용할 애니메이션 이름 지정

(2) duration : 애니메이션 실행 시간

(3) timing-function : 애니메이션에 사용할 곡선 형태 선택 기본 값 : ease 속성값은 transition-timing-function과 값과 동일

(4) delay : 애니메이션 지연 시간 설정

(5) iteration-count : 애니메이션 반복 횟수 지정 숫자 OR infinite키워드 사용

(6) direction : 애니메이션 방향 지정 noraml OR alternate(반대방향) 사용