transition 속성

- transition

CSS 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 

<style>

    #resize {

        height: 100px;

        width: 150px;

        -webkit-transition: width 1s, height 3s;

        transition: width 1s, height 3s;

    }

    #resize:hover { width: 300px; height: 500px; }

</style>

 

transition 의 속성 변화를 width, height값을 다르게 설정할 수도 있다. 

- transition 속성 - 모든 속성들은 transition에 한번에 사용할 수 있다. 

 

- transition-timing-function 속성

 1. linear : 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행

2. ease : 기본값이며, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려진다. 

3. ease-in : 전환(transition) 효과가 천천히 시작

4. ease-out : 전환(transition) 효과가 천천히 끝남

5. ease-in-out : 전환(transition) 효과가 천천히 시작되어, 천천히 끝난다.

6. cubic-bezier(n,n,n,n) : 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

 

- transition-delay 속성

transition-delay 속성은 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정

 

- 전환(transition) 효과와 변형(transform) 효과의 동시 적용

<style>

    #windmill {

        height: 100px;

        width: 100px;

        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;

        transition: width 2s, height 2s, transform 2s;

    }

    #windmill:hover {

        width: 300px;

        height: 300px;

        -webkit-transform: rotateY(180deg);

        transform: rotateY(180deg);

    }

</style>