css animation background-position 实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css animation background-position 实例 - 自学教程(runoops.com)</title>
    <style>
        #myDIV {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            background-image: url('//demo.runoops.com/static/img/smiley.gif');
            background-position: top left;
            -webkit-animation: mymove 5s infinite;
            /* Chrome, Safari, Opera */
            animation: mymove 5s infinite;
        }

/* Chrome, Safari, Opera */
        @-webkit-keyframes mymove {
            50% {
                background-position: center;
            }
        }

/* Standard syntax */
        @keyframes mymove {
            50% {
                background-position: center;
            }
        }
    </style>
</head>

<body>

<p>逐步改变 background-position 属性，从 "top left" 到 "center",然后回到 "top left":
    <p>
    <div id="myDIV"></div>
    <p>background-position 属性支持动画效果。</p>
    <p><b>注意：</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>

</body>

</html>