关键帧与动画-JZTXT

HTML部分

<body>
    <div class="box"></div>
</body>

css部分

// 设置背景颜色
body {
    background: #333;
}

.box {
    background: #fff; // 设置显眼的颜色
    width: 200px; // 固定宽，为了看的见
    height: 200px; // 固定高，为了看的见
    position: relative; // 相对定位
    animation-name: myanimation; // 动画名字，指定关键帧的名字就可以，细节在下面的定义
    animation-duration: 4s; // 动画持续时间，间接控制速率，越长越慢！
}

// 定义关键帧
@keyframes myanimation {
    // 必须。在动画开始时，关键帧的位置
    0% {
        background: #fff;
        left: 0;
        top: 0;
    }

    // 在动画四分之一时，关键帧的位置
    25% {
        background: #f00;
        left: 300px;
        top: 0;
    }

    // 在动画一半时，关键帧的位置
    50% {
        background: #0f0;
        left: 300px;
        top: 300px;
    }

    // 在动画四分之三时，关键帧的位置
    75% {
        background: #00f;
        left: 0;
        top: 300px;
    }

    // 必须，在动画结束时，关键帧的位置
    100% {
        background: #fff;
        left: 0;
        top: 0;
    }
}