GroupBlog

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>会旋转</title>
    </head>
    <style media="screen">
        .demo{
            width: 100px;
            height: 100px;
            background: rgb(135, 219, 18);
            /*声明动画：名字，持续时间，循环次数，播放方式，播放之前或之后的变化是否呈现（是否恢复动画之前的状态）*/
            animation-name: ani1;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier();
            animation-fill-mode: forwards;
        }
        /*定义动画*/
        @keyframes ani1 {
            /*开始状态*/
            0%{
                transform: translateX(0) rotate(0);
            }
            /*结束状态*/
            100%{
                transform: translateX(900px) rotate(720deg);

            }
        }
    </style>
    <body>
        <div class="box">
            <div class="demo"></div>
        </div>
    </body>
</html>