transition의 종류

css3로 넘어오면서, 이전에는 스크립트로 구현해야 했던 동작들을 css로 아주 쉽고 간편하게 구현할 수 있다.

transition-delay : 해당시간 후에 동작

transition-duration : 동작되는 총 시간

transition-timing-function : 움직임의 가속도 설정 (ease, linear, ease-in, ease-out, cubic-bezier)

참고 : http://www.w3.org/TR/css3-transitions/#transition-timing-function

사용방법 :

<style>

div {

width:100px;

border:1px solid red

}

#ease:hover {

width:500px

}

#ease {

transition:.2s ease /* 시간, 가속도 */

}

</style>

<div id="ease">ease</div>

그런데 여기서 눈여겨 봐야 할 곳이 있다.

지금은 transition을 #ease 에 주었다.

실행을 해보면 마우스를 올렸을 때와 뗐을 때 모두 트랜지션이 적용 된다.

자, 그럼 이번엔 트랜지션을 #ease:hover에 넣어보자.

<style>

div {

width:100px;

border:1px solid red

}

#ease:hover {

width:500px;

transition:.2s ease /* 시간, 가속도 */

}

</style>

<div id="ease">ease</div>

결과가 어떤가??

마우스를 떼었을 때, 트랜지션이 적용되지 않고 바로 100px로 줄어든다.

바로 이 차이!!