css3 @keyframes

### 使用 `@keyframes` 定义动画关键帧

在 CSS3 中，`@keyframes` 是用于定义动画的关键部分。要创建一个动画效果，必须先定义一组关键帧以及它们之间的样式变化[^1]。

#### 创建基本结构

首先，在样式表中声明 `@keyframes` 规则并为其命名：

/* 创建名为 'example' 的动画 */
@keyframes example {
    /* 动画起始状态 (可选 "from") */
    0%   { background-color: red; }
    
    /* 动画结束状态 (可选 "to") */
    100% { background-color: yellow; }
}

上述代码展示了最简单的两个极端位置——即动画开始 (`0%`) 和 结束 (`100%`) ——之间颜色的变化[^2]。

#### 添加更多关键帧

为了使动画更加复杂和平滑，可以在两者之间加入额外的关键帧：

@keyframes slideAndRotate {
    0%, from {
        transform: translateX(0) rotate(0);
    }

    50% {
        transform: translateX(100px) rotate(90deg);
    }

    100%, to {
        transform: translateX(200px) rotate(180deg);
    }
}

这里不仅设置了位移还加入了旋转的效果，并且利用了 `translate()` 函数实现了水平移动的同时也应用了 `rotate()` 来改变元素的角度[^4]。

#### 将动画应用于HTML元素

最后一步就是把已经定义好的动画附加给具体的 HTML 元素上。这通常通过设置 `animation` 属性完成，该属性可以控制诸如持续时间、延迟时间和播放次数等参数：

div {
    width: 100px;
    height: 100px;
    background-color: blue;

    animation-name: slideAndRotate;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}

这段代码表示 div 元素将在加载页面后一秒启动无限循环的线性运动，每次完整的周期为三秒钟。