css3 transition/animation

CSS3 Transitions

transition 속성은 그 자체로도 애니메이션 효과를 가지고는 있지만, animation 속성보다는 제한적인 기능을 가지고 있습니다. 그래서, 하나의 줄거리를 이루기 위한 애니메이션 보다는, 특정 객체를 부각시키는 인스턴트적인 상황이나 화면 전환에 더 적합합니다.

transition 속성

transition-delay   : 지연시간

    

transition-duration  :지속시간

transition-property : 속성

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

*트랜지션은 객체가 기존에 가지고 있던 속성의 값이 다른 값으로 변할 때만 표현됩니다. ie10이하 지원 안함 *

타이밍

속성	값
ease	기본값
linear	모든 속도가 같다.
ease-in	느리게 시작한 후 일정한 속도에 다다르면 그 상태 유지
ease-out	일정한 속도의 등속으로 시작해서 점점 느려지면서 끝납니다.
ease-in-out	ease와 비슷
cubic-bezier(n,n,n,n)	처음과 끝의 속도를 0과 1 사이의 수치를 이용하여 4단계로 지정할 수 있습니다. 베지어(Bezier)라는 곡선 운동을 정의합니다.

http://cubic-bezier.com/

https://jsfiddle.net/jywoo/917431p2/1/

CSS3 animation

@keyframes Rule에서는 객체가 시간의 흐름에 따라 어떻게 변형될 지 모양새에 관련된 선언을 하고, animation 속성에서는 타이밍, 지연시간, 반복 등 움직임에 관한 선언을 합니다.

@keyframes myAnimation {

  from { 효과 속성 값 시작 }

  to   { 효과 속성 값 끝 }

}

duration : 지속시간

delay : 지연시간

iteration-count : 반복횟수, 무제한은 infinite

direction : 반복 방향

 1) normal : 같은 방향으로 <-> reverse : 역방향으로

 2) alternate : 한 사이클이 끝나면 역방향으로 움직임(되감기) <-> alternate-reverse

timing-function : 속도

fill-mode

 : forwards, backwards, both, none

play-state 

 : paused, running