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>

标签：动画,50%,transform,animation,zhuan,translate,css
来源： https://www.cnblogs.com/limakilo/p/14933356.html