CSS 动画详解（`@keyframes` + `animation`）

CSS 动画可以让元素进行平滑的移动、旋转、渐变、放大缩小等效果。
动画的核心是 @keyframes，它用于定义动画的每个阶段的样式变化。
然后，我们用 animation 相关属性来控制动画的执行方式。

🎯 一、@keyframes基本语法格式

@keyframes 动画名称 {
  百分比或关键字 {
    CSS样式;
  }
}

动画名称 是你自定义的标识名，稍后通过 animation 属性使用它。

🧩 二、@keyframes百分比和关键字写法

✅ 百分比形式（最常见）

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

表示从 0% 的时候透明度是 0，到 100% 时变成 1。

✅ 关键字写法（语义清晰）

@keyframes move {
  from { left: 0; }
  to   { left: 200px; }
}

from 等同于 0%，to 等同于 100%，作用完全一样，只是写法不同。

🔧 三、@keyframes完整使用示例

<style>
@keyframes slideRight {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  animation: slideRight 2s ease-in-out infinite;
}
</style>

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

🔍 解释：

属性	含义
`@keyframes slideRight`	定义一个名为 `slideRight` 的动画
`animation: slideRight 2s ease-in-out infinite;`	应用该动画，持续 2 秒，缓入缓出，无限循环

📦 四、@keyframes 可配合哪些属性动画？

最常见的如：

transform（位移、缩放、旋转等）
opacity（透明度）
color / background-color
width / height / margin / padding
box-shadow
border…

只要是 支持过渡的属性，基本都能配合 @keyframes 使用。

🛠 五、配合 animation 使用的属性一览：

animation-name: slideRight;         /* 动画名称 */
animation-duration: 2s;             /* 动画时长 */
animation-timing-function: ease;    /* 缓动函数 */
animation-delay: 1s;                /* 延迟开始 */
animation-iteration-count: infinite;/* 重复次数 */
animation-direction: alternate;     /* 正反交替执行 */
animation-fill-mode: forwards;      /* 保持动画结束状态 */
animation-play-state: paused;       /* 动画暂停 */

你也可以写成一行简写：

1	animation: slideRight 2s ease 1s infinite alternate;

✅ 结语

@keyframes 是 CSS 动画的灵魂，如果你掌握了它，就能实现各种炫酷的动效，比如：

弹跳球
加载动画
按钮点击波纹
卡片翻转
闪烁特效……

1️⃣ CSS 动画基本属性

属性	作用	示例
`animation-name`	绑定动画名称	`animation-name: fade-in;`
`animation-duration`	动画持续时间	`animation-duration: 2s;`
`animation-timing-function`	速度曲线	`animation-timing-function: ease-in-out;`
`animation-iteration-count`	动画循环次数	`animation-iteration-count: infinite;`
`animation-delay`	延迟开始时间	`animation-delay: 1s;`
`animation-direction`	方向（正向/反向）	`animation-direction: alternate;`
`animation-fill-mode`	动画结束后状态	`animation-fill-mode: forwards;`
`animation-play-state`	控制动画播放/暂停	`animation-play-state: paused;`

2️⃣ 经典动画示例

🎨 1. 渐隐渐现动画

效果：让元素不断淡入淡出

@keyframes fade-in-out {
    0% { opacity: 0; }  /* 开始是透明的 */
    50% { opacity: 1; } /* 变为完全可见 */
    100% { opacity: 0; } /* 再次透明 */
}
.box {
    width: 100px;
    height: 100px;
    background: red;
    animation: fade-in-out 3s infinite;
}

🚀 2. 旋转动画

效果：让元素不断旋转

@keyframes rotate {
    from { transform: rotate(0deg); }  /* 从 0 度开始 */
    to { transform: rotate(360deg); }  /* 旋转一圈 */
}
.box {
    width: 100px;
    height: 100px;
    background: blue;
    animation: rotate 2s linear infinite;
}

📌 3. 颜色渐变动画

效果：背景颜色不断变化

@keyframes color-change {
    0% { background: red; }
    50% { background: yellow; }
    100% { background: blue; }
}
.box {
    width: 100px;
    height: 100px;
    animation: color-change 3s infinite;
}

📦 4. 缩放动画

效果：元素不断放大缩小

@keyframes scale {
    0% { transform: scale(1); }   /* 原始大小 */
    50% { transform: scale(1.5); } /* 放大 1.5 倍 */
    100% { transform: scale(1); }  /* 恢复原始大小 */
}
.box {
    width: 100px;
    height: 100px;
    background: green;
    animation: scale 2s ease-in-out infinite;
}

🏃‍♂️ 5. 移动动画

效果：元素从左到右移动

@keyframes move-right {
    0% { transform: translateX(0); }
    100% { transform: translateX(300px); }
}
.box {
    width: 100px;
    height: 100px;
    background: purple;
    position: relative;
    animation: move-right 3s ease-in-out infinite alternate;
}

🔥 6. 跳动动画

效果：元素上下跳动

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-50px); }
}
.box {
    width: 100px;
    height: 100px;
    background: orange;
    animation: bounce 1s infinite;
}

🎭 7. 打字机效果

效果：模拟文本逐字出现

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blinking {
    50% { border-color: transparent; }
}
.text {
    display: inline-block;
    font-size: 24px;
    white-space: nowrap;
    overflow: hidden;
    width: 0;
    border-right: 2px solid black;
    animation: typing 3s steps(10, end) forwards, blinking 1s infinite;
}

1	<div class="text">Hello, CSS Animation!</div>

3️⃣ 动画的组合

你可以组合多个动画，让效果更加丰富。

🌟 组合动画示例

@keyframes moveAndRotate {
    0% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(200px) rotate(180deg); }
    100% { transform: translateX(0) rotate(360deg); }
}
.box {
    width: 100px;
    height: 100px;
    background: cyan;
    animation: moveAndRotate 3s ease-in-out infinite;
}

4️⃣ 动画控制（`animation-play-state`）

可以用 animation-play-state 来控制动画的暂停和继续。

🌟 点击暂停/播放动画

.box {
    width: 100px;
    height: 100px;
    background: tomato;
    animation: bounce 1s infinite;
    animation-play-state: running;
}
.box:hover {
    animation-play-state: paused;
}

效果：鼠标悬停在 .box 上时，动画会暂停；移开后恢复。

✨ 结论

简单动画：fade-in-out（渐隐渐现）、rotate（旋转）、color-change（颜色变化）。
复杂动画：move-right（移动）、bounce（跳动）、typing（打字机）。
组合动画：可以同时控制多个动画效果，如 moveAndRotate。
动画控制：animation-play-state 让动画可暂停或继续。

如果您喜欢此博客或发现它对您有用，则欢迎对此发表评论。也欢迎您共享此博客，以便更多人可以参与。如果博客中使用的图像侵犯了您的版权，请与作者联系以将其删除。谢谢！

css动画