css-learning
/
base
/
animation_2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>动画 | https://alexz33.github.io/</title>
    <meta name="description" content="动画">
    <meta name="author" content="https://alexz33.github.io/" />
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
            /* Safari and Chrome: */
            -webkit-animation-name: myfirst;
            -webkit-animation-duration: 5s;
            -webkit-animation-timing-function: linear;
            -webkit-animation-delay: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-play-state: running;
        }

        @keyframes myfirst {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }

            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }

            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }

            75% {
                background: green;
                left: 0px;
                top: 200px;
            }

            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }

        @-webkit-keyframes myfirst

        /* Safari and Chrome */
            {
            0% {
                background: red;
                left: 0px;
                top: 0px;
            }

            25% {
                background: yellow;
                left: 200px;
                top: 0px;
            }

            50% {
                background: blue;
                left: 200px;
                top: 200px;
            }

            75% {
                background: green;
                left: 0px;
                top: 200px;
            }

            100% {
                background: red;
                left: 0px;
                top: 0px;
            }
        }
    </style>
</head>

<body>

    <div>
        CSS3
        <span style="font-size:10px;">Tutorial</span>
    </div>

</body>

</html>