keyframes

@-webkit-keyframes hehe{
            0 {background: red;}
            20% {background: blue;}
            50% {background: pink;}
            75% {background: #CCC;}
            100% {background: #f60;}
        }
        .box1{
            width: 100px;
            height: 100px;
            background: green;
            animation:hehe 5s infinite;
        }

其它修饰词：infinite、backwards 、forwards、aleternate 1s

@-webkit-keyframes hehe{
            0 {background: red;}
            20% {background: blue;}
            50% {background: pink;}
            75% {background: #CCC;}
            100% {background: #f60;}
        }
        @-webkit-keyframes aa{
            0 {top:20px;}
            20% {top: 100px;}
            50% {top: 200px;}
            75% {top:300px;}
            100% {top:400px;}
        }
        .box1{
            width: 100px;
            height: 100px;
            background: green;
            animation:hehe 5s forwards;
        }
        .box2{
            width: 100px;
            height: 100px;
            position: relative;
            top:10px;
            background: green;
            animation:aa 5s infinite;
        }