CSS animation-timing-function 属性实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation-timing-function 属性 实例 - 自学教程(runoops.com)</title>
    <style>
        div {
            width: 100px;
            height: 50px;
            background: red;
            color: white;
            font-weight: bold;
            position: relative;
            animation: mymove 5s infinite;
            -webkit-animation: mymove 5s infinite;
            /* Safari and Chrome */
        }

#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 and Chrome: */
        #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;
        }

@keyframes mymove {
            from {
                left: 0px;
            }

to {
                left: 300px;
            }
        }

@-webkit-keyframes mymove

/* Safari and Chrome */
            {
            from {
                left: 0px;
            }

to {
                left: 300px;
            }
        }
    </style>
</head>

<body>

<p><strong>注意:</strong> animation-timing-funtion属性不兼容 Internet Explorer 9以及更早版本的浏览器</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>