[CSS] animation02

CSS3_animation02

# Transitions

- 객체가 기존에 가지고 있던 속성의 다른 값으로 변할 때만 표현된다.

- 페이지가 로드되면서 자동으로 시작되지 않는다. :hover와 같은 가상 클래스 선택자 혹은, 자바스크립트의 onclick 이벤트 따위의 부수적인 액션에 의해 발동된다.

- transition-property : 효과를 적용할 속성들을 나열한다. 2개이상일 경우에는 쉼표로 구분.

- transition-duration : 효과의 지속 시간을 표기. 1s는 1초이다.

- transition-timing-function : 변화의 시작과 끝 타이밍을 정의한다.

- transition-delay : 효과의 지연시간을 정의한다. 만일 3초로 설정했다면, 페이지가 로드되고 나서 3초 후에 효과가 시작된다.

* 타이밍 transition-timing-function : 변화의 시작과 끝 타이밍을 정의한다.

- ease : 기본값. 느리게 시작하여 점점 빨라졌다가 느리게 끝난다.

- linear : 모든 속도가 같은 등속 운동이다.

- ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동을한다.

- ease-out : 일정한 속도의 등속으로 시작해서 점점 느려지면서 끝난다.

- ease-in-out : ease와 비슷하다. 느리게 시작해서 느리게 끝난다.

- cubic-bezier(n,n,n,n) : 처음과 끝의 속도를 0과 1 사이의 수치를 이용하여 4단계로 지정할 수 있다.

https://jsfiddle.net/Kimara/rr1supdz/2/

# animation

@keyframes Rule 에서는 객체가 시간의 흐름에 따라 어떻게 변형될 지 모양새에 관련된 선언을 한다.

animation 속성에서는 타이밍, 지연시간, 반복 등 움직임에 관한 선언을 한다.

- animation-name : @keyframes Rule에서 선언한 애니메이션 이름을 넣어준다.

- animation-duration :  0%부터 100%까지의 움직임을 몇초에 걸쳐 구현할 지 선언.

- animation-interation-count : 애니메이션을 얼마나 반복시킬지

- animation-direction :

  1) normal : 한 사이클이 끝나도 같은 방향으로 움직인다.

  2) alternate : 한 사이클이 끝나면 역방향으로 움직인다.

  3) reverse : 처음부터 역방향으로 움직인다.

  4) alternate-reserve : 처음부터 역방향으로 움직이고, 한 사이클이 끝나면 정상 방향으로 움직인다. 즉 alternate의 반대 움직임이다.

- animation-timing-function : 키프레임 간의 영향력을 조절하여, 움직임에 긴장감을 줄 수 있다.

- animation-fill-mode : 한 사이클의 애니메이션이 종료되고 난 후, 애니메이션의 상태를 정의한다.

- animation-delay : 애니메이션의 시작 지연시간을 정의한다. 1초는 1s, 0.1초는 1ms이다.

단축형 : animation : name duration delay iteration-count direction fill-mode

https://jsfiddle.net/Kimara/kgpb2e5f/3/

- easing : 움직임에 현실감을 준다.

https://jsfiddle.net/Kimara/p2bap8c2/

- step : 애니메이션의 흐름을 step(단계)화해서 제어할 수 있다. (스프라이트?)

http://jsfiddle.net/simurai/CGmCe/light/

출처 :

http://www.beautifulcss.com/archives/2026

http://www.beautifulcss.com/archives/2724

참고 : https://developers.google.com/web/fundamentals/?hl=ko