애니메이션의 속도 곡선 지정

이 animation-timing-function속성은 애니메이션의 속도 곡선을 지정합니다.

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

1. ease - 느린 시작, 느린 시작, 천천히 끝내는 애니메이션 지정 (기본값)

2. linear - 시작부터 끝까지 동일한 속도의 애니메이션 지정

3. ease-in - 시작이 느린 애니메이션을 지정합니다.

4. ease-out - 느린 끝이있는 애니메이션을 지정합니다.

5. ease-in-out - 시작과 끝이 느린 애니메이션을 지정합니다.

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

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

예

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

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

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

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

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

[전체소스]

<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 50px;

    background-color: red;

    font-weight: bold;

    position: relative;

    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */

    animation: mymove 5s infinite;

}

/* Safari 4.0 - 8.0 */

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

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

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

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

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

/* Standard syntax */

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

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

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

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

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

/* Safari 4.0 - 8.0 */

@-webkit-keyframes mymove {

    from {left: 0px;}

    to {left: 300px;}

}

/* Standard syntax */

@keyframes mymove {

    from {left: 0px;}

    to {left: 300px;}

}

</style>

</head>

<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>

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

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

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

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

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

</body>

</html>