CSS3核心特性-第10章-10.1-动画基础语法

学习目标

• 掌握 @keyframes 关键帧规则的定义方法
• 理解 animation 属性的核心子属性及其取值
• 能够编写简单的循环动画和单次动画效果
• 区分动画与过渡（transition）的适用场景

概念讲解

CSS3 动画（Animation）是通过 @keyframes 定义关键帧序列，控制元素从一个样式状态平滑过渡到另一个状态的技术。与过渡（transition）相比，动画具有更强的灵活性：

• 支持多阶段状态变化（过渡仅支持开始→结束两个状态）
• 可自动触发（过渡需事件触发如 :hover）
• 支持循环播放、方向控制、暂停/继续等高级功能

核心术语：

• 关键帧（Keyframe）：动画过程中的特定状态（如开始、中间、结束状态）
• 动画属性（Animation）：控制动画的播放方式（时长、延迟、循环次数等）
• 动画状态：running（运行）/paused（暂停）

语法参考

1. @keyframes 规则

用于定义动画的关键帧序列，语法如下：

@keyframes 动画名称 {
  0% { 样式属性: 值; }       /* 动画开始状态 */
  50% { 样式属性: 值; }       /* 动画中间状态 */
  100% { 样式属性: 值; }      /* 动画结束状态 */
}

/* 或使用 from/to 简化（仅开始和结束状态） */
@keyframes 动画名称 {
  from { 样式属性: 值; }      /* 等价于 0% */
  to { 样式属性: 值; }        /* 等价于 100% */
}

2. animation 属性

用于将动画应用到元素，是以下子属性的简写：

/* 完整语法 */
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） */

时间函数取值：

实战示例

示例1：简单旋转动画

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

<style>
/* 定义关键帧 */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 应用动画 */
.box {
  width: 100px;
  height: 100px;
  background: #4CAF50;
  border-radius: 50%;
  /* 动画属性：名称 时长 匀速 无限循环 */
  animation: rotate 2s linear infinite;
}
</style>

效果：正方形元素以中心为轴匀速旋转，形成loading效果。

示例2：多状态颜色渐变动画

/* 定义关键帧 */
@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次后停止在结束状态？

   /* 答案 */
   animation: myAnim 2s forwards 3; /* forwards 使动画结束后保持最后一帧状态 */
   

2. 写出一个元素从左侧滑入（translateX(-100%)→translateX(0)）的关键帧定义。

   /* 答案 */
   @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秒开始，无限循环，交替方向播放。