css动画

 <style>
        /* 定义名称为zhuan的动画 */
        @keyframes zhuan {
            0% {
                transform: translate(0, 0);
            }
            /* 水平移动 */
            30% {
                transform: translate(600px, 0);
            }
            /* 放大x，y 2倍*/
            50% {
                transform: scale(2, 2);
            }
            /* 旋转45度 */
            70% {
                transform: rotate(180deg);
                /* 设置旋转中心为y轴中点 */
                transform-origin: 0 50%;
            }
            100% {
                transform: translate(1500px, 800px);
            }
        }
        
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            animation: zhuan;
            /* 动画持续时间 */
            animation-duration: 10s;
        }
    </style>

动画属性

 div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            animation-name: zhuan;
            /* 动画持续时间 */
            animation-duration: 10s;
            /* 动画style */
            animation-timing-function: ease-in;
            /* 延迟触发 */
            animation-delay: 2s;
            /* 设置动画原路返回 */
            animation-direction: alternate;
            /* 设置动画次数为无限次 */
            animation-iteration-count: infinite;
            /* 设置动画不会返回 */
            animation-fill-mode: forwards;
        }
        
        div:hover {
            /* 动画暂停 */
            animation-play-state: paused;
        }