44일차학습일지_CSS

전환(transition)

전환(transition)을 위해 제공되는 속성(property)는 다음과 같습니다.

1. transition

2. transition-delay

3. transition-duration

4. transition-property

5. transition-timing-function

 

transition 속성

transition 속성은 다음과 같은 순서로 정의할 수 있습니다.

1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.

2. 추가할 전환 효과가 지속될 시간을 설정합니다.

다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어나는 예제입니다.

예제

<style>

    div.keyboard {

        width: 100px;

        -webkit-transition: width 1s;

        transition: width 1s;

    }

    div.keyboard:hover { width: 300px; }

</style>

또한, 해당 요소의 여러 속성을 동시에 변경할 수도 있습니다.

다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비뿐만 아니라 높이까지도 변경하는 예제입니다.

예제

<style>

    #resize {

        height: 100px;

        width: 150px;

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

        transition: width 1s, height 3s;

    }

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

</style>

지속 시간의 기본값은 0초이므로, 효과가 지속될 시간을 명시하지 않으면 아무런 효과도 나타나지 않을 것입니다.

 

transition-timing-function 속성

transition-timing-function 속성은 전환(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 함수에 따라 진행됩니다.

예제

<style>

    div {

        width: 100px;

        -webkit-transition: width 1s;

        transition: width 1s;

    }

    #div_01 {

        -webkit-transition-timing-function: linear;

        transition-timing-function: linear;

    }

    #div_05 {

        -webkit-transition-timing-function: ease-in-out;

        transition-timing-function: ease-in-out;

    }

    div:hover { width: 300px; }

</style>

 

transition-delay 속성

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

전환(transition) 효과는 이 메소드로 설정된 시간이 흐른 뒤에야 비로소 시작됩니다.

예제

<style>

    #resize {

        height: 100px;

        width: 150px;

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

        transition: width 1s, height 2s;

        -webkit-transition-delay: 1s;

        transition-delay: 1s;

    }

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

</style>

 

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

전환(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>

 

CSS3 transition 속성

transition	모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
transition-property	요소에 추가할 전환(transition) 효과를 설정함.
transition-duration	전환(transition) 효과가 지속될 시간을 설정함.
transition-timing-function	전환(transition) 효과의 시간당 속도를 설정함.
transition-delay	전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.

https://www.tcpschool.com/css/css3_transform_transition