css物件出現动画效果

### 使用 CSS 实现元素动画效果

#### HTML 结构
为了创建一个简单的动画效果，首先需要定义基本的 HTML 结构。这里以按钮为例：

<button class="animated-button">Hover me</button>

#### 基础样式设置
接着通过 CSS 来设定初始状态以及一些必要的布局属性。

.animated-button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
    background-color: #ff7e5f;
    color: white;
    transition: all .3s ease-in-out; /* 平滑过渡 */
}

#### 定义关键帧动画
利用 `@keyframes` 规则来指定动画过程中不同时间点的状态变化。例如下面的例子展示了从红色到白色的渐变过程[^2]。

@keyframes colorChange {
    from {
        background-color: red;
    }
    to {
        background-color: white;
    }
}

#### 应用动画属性
最后一步是在目标元素上应用之前定义好的动画名称、持续时间和循环模式等参数。此案例中使用了无限次重复播放的方式，并加入了延迟计算使得每次触发都有轻微的时间差。

.animated-button:hover {
    animation: colorChange 2.5s infinite;
    animation-delay: calc(var(--i) * 0.05s);
}

上述代码实现了当鼠标悬停在按钮上方时会自动执行由红转白的颜色变换动画，整个过程将持续2.5秒并不断重复直到移开光标为止。