# CSS3核心特性-第10章-10.1-动画基础语法 ## 学习目标 - 掌握 `@keyframes` 关键帧规则的定义方法 - 理解 `animation` 属性的核心子属性及其取值 - 能够编写简单的循环动画和单次动画效果 - 区分动画与过渡（`transition`）的适用场景 ## 概念讲解 CSS3 动画（Animation）是通过 `@keyframes` 定义关键帧序列，控制元素从一个样式状态平滑过渡到另一个状态的技术。与过渡（`transition`）相比，动画具有更强的灵活性： - 支持多阶段状态变化（过渡仅支持开始→结束两个状态） - 可自动触发（过渡需事件触发如 `:hover`） - 支持循环播放、方向控制、暂停/继续等高级功能 **核心术语**： - **关键帧（Keyframe）**：动画过程中的特定状态（如开始、中间、结束状态） - **动画属性（Animation）**：控制动画的播放方式（时长、延迟、循环次数等） - **动画状态**：`running`（运行）/`paused`（暂停） ## 语法参考 ### 1. `@keyframes` 规则 用于定义动画的关键帧序列，语法如下： ```css @keyframes 动画名称 { 0% { 样式属性: 值; } /* 动画开始状态 */ 50% { 样式属性: 值; } /* 动画中间状态 */ 100% { 样式属性: 值; } /* 动画结束状态 */ } /* 或使用 from/to 简化（仅开始和结束状态） */ @keyframes 动画名称 { from { 样式属性: 值; } /* 等价于 0% */ to { 样式属性: 值; } /* 等价于 100% */ } ``` ### 2. `animation` 属性 用于将动画应用到元素，是以下子属性的简写： ```css /* 完整语法 */ animation: 动画名称 时长 时间函数 延迟 循环次数 方向 填充模式 播放状态; /* 常用子属性 */ animation-name: none | ; /* 必选，指定关键帧名称 */ animation-duration: ; /* 必选，动画持续时间（如 2s、500ms） */ animation-timing-function: ease | linear | ...; /* 动画速度曲线（默认 ease） */ animation-iteration-count: | infinite; /* 循环次数（默认 1，infinite 为无限循环） */ animation-direction: normal | reverse | alternate;/* 动画方向（默认 normal） */ ``` **时间函数取值**： | 取值 | 描述 | 应用场景 | | ----------------------- | ---------------- | -------------------------- | | `ease` | 慢→快→慢（默认） | 自然过渡效果 | | `linear` | 匀速 | 机械运动（如时钟旋转） | | `ease-in` | 慢进 | 渐入效果 | | `ease-out` | 慢出 | 渐出效果 | | `cubic-bezier(n,n,n,n)` | 自定义贝塞尔曲线 | 复杂曲线控制（如弹性效果） | ## 实战示例 ### 示例1：简单旋转动画 ```html ``` **效果**：正方形元素以中心为轴匀速旋转，形成loading效果。 ### 示例2：多状态颜色渐变动画 ```css /* 定义关键帧 */ @keyframes colorChange { 0% { background: red; transform: scale(1); } 50% { background: yellow; transform: scale(1.2); } 100% { background: blue; transform: scale(1); } } /* 应用动画 */ .button { padding: 10px 20px; border: none; color: white; font-size: 16px; /* 动画：名称 3s 慢→快→慢 1s延迟 无限交替 */ animation: colorChange 3s ease 1s infinite alternate; } ``` **效果**：按钮背景色从红→黄→蓝渐变，同时大小从1→1.2→1缩放，动画结束后反向播放（`alternate`）。 ## 注意事项 1. **浏览器兼容性**： - 现代浏览器（Chrome 43+、Firefox 16+、Edge 12+）原生支持，无需前缀 - 旧版浏览器（如 IE10-）需添加 `-ms-` 前缀，且不支持部分属性（如 `animation-fill-mode`） 2. **性能优化**： - 优先使用 `transform` 和 `opacity` 属性动画（浏览器可硬件加速） - 避免动画大量元素或复杂计算（如 `box-shadow` 动画易导致卡顿） - 长动画建议添加 `will-change: transform` 提示浏览器优化 3. **与过渡的区别**： - **动画**：适合多状态变化、自动触发、循环播放（如加载动画、轮播图） - **过渡**：适合简单状态切换、事件触发（如 hover 效果、弹窗显示） ## 自测题 1. 如何让动画播放3次后停止在结束状态？ ```css /* 答案 */ animation: myAnim 2s forwards 3; /* forwards 使动画结束后保持最后一帧状态 */ ``` 2. 写出一个元素从左侧滑入（`translateX(-100%)`→`translateX(0)`）的关键帧定义。 ```css /* 答案 */ @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } ``` 3. `animation: move 2s ease-in-out 1s infinite alternate;` 的含义是？ - 动画名称 `move`，持续2秒，慢进慢出，延迟1秒开始，无限循环，交替方向播放。