CSS3 전환 속도 곡선 지정

이 transition-timing-function속성은 전환 효과의 속도 곡선을 지정합니다.

transition-timing-function 속성은 다음 값을 가질 수 있습니다.

1. ease - 천천히 시작한 후 전환 효과를 지정하고 빠르다가 느리게 끝냅니다 (기본값).

2. linear - 시작부터 끝까지 동일한 속도의 전환 효과를 지정합니다.

3. ease-in - 느린 시작으로 전환 효과 지정

4. ease-out - 느린 끝으로 전환 효과 지정

5. ease-in-out - 느린 시작과 끝으로 전환 효과를 지정합니다.

6. cubic-bezier(n,n,n,n) - 입방체 베 지어 함수로 자신 만의 값을 정의 할 수 있습니다.

다음 예제는 사용할 수있는 몇 가지 다른 속도 곡선을 보여줍니다.

예

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-transition: width 2s; /* Safari */

    transition: width 2s;

}

/* For Safari 3.1 to 6.0 */

#div1 {-webkit-transition-timing-function: linear;}

#div2 {-webkit-transition-timing-function: ease;}

#div3 {-webkit-transition-timing-function: ease-in;}

#div4 {-webkit-transition-timing-function: ease-out;}

#div5 {-webkit-transition-timing-function: ease-in-out;}

/* Standard syntax */

#div1 {transition-timing-function: linear;}

#div2 {transition-timing-function: ease;}

#div3 {transition-timing-function: ease-in;}

#div4 {transition-timing-function: ease-out;}

#div5 {transition-timing-function: ease-in-out;}

div:hover {

    width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div><br>

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

<div id="div3">ease-in</div><br>

<div id="div4">ease-out</div><br>

<div id="div5">ease-in-out</div><br>

<p>Hover over the div elements above, to see the different speed curves.</p>

</body>

</html>