transition 속성

transition은 한 가지 상태에서 다른 상태로 변화하는 것이라고 보면 됩니다.

▶transition 문법

transition: transition-property | transition-duration | transition-timing-function | transition-delay

* 기본값 : all 0 ease 0 

transition-property 움직일 속성지정 (하나 이상의 속성을 나열할 때 쉼표로 분리)

transition-duration 총 지속 시간 (시간을 정해주지않음 기본값이 0이라 아무효과도 없다, 또한 여러가지 속성을 지정할시 쉼표로 분리해 지정) 

transition-timing-function 속도 설정 (시간지연)

transition-delay 시간 지연

transition-timing-function

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 

* ease : 기본값. 천천히 시작해서, 빠르게 진행하며, 천천히 끝남.

            cubic-bezier(0.25,0.1,0.25,1))와 같음

* linear : 처음과 끝이 같은 속도로 나타남

            cubic-bezier(0,0,1,1))와 같음

* ease-in : 천천히 시작  cubic-bezier(0.42,0,1,1))와 같음

* ease-out : 천천이 끝남  cubic-bezier(0,0,0.58,1))와 같음

* ease-in-out 천천히 시작해서 천천히 끝남  cubic-bezier(0.42,0,0.58,1))와 같음

* cubic-bezier(n,n,n,n)  직접 값을 지정할 수 있음. 가능한 값은 0부터 1까지 숫자값

cubic-bezier값 설정은 아래 참조

http://roblaplaca.com/blog/2011/03/11/understanding-css-cubic-bezier/

http://www.w3.org/TR/css3-transitions/#transition-property-property

http://www.roblaplaca.com/examples/bezierBuilder/#

<http://aboooks.tistory.com/search/gradient> 보고 대략적으로 정리 ㄱㄱ