章节练习题
1. 选择题（区分 transition 与 animation 的触发方式）
题目：以下关于 CSS3 transition 和 animation 的说法，正确的是（ ）
A. transition 和 animation 均需用户交互（如 hover）才能触发
B. transition 需通过状态变化（如 hover、class 切换）触发，animation 可自主播放
C. transition 可定义关键帧，animation 仅能实现简单状态过渡
D. transition 和 animation 均无法实现循环播放
答案：B
解析：transition 依赖元素状态变化（如 hover、active 或 JS 操作的 class 切换）触发，且仅执行一次；animation 通过 @keyframes 定义完整运动路径，可通过 animation-iteration-count: infinite 实现自主循环播放，无需用户交互。
2. 填空题（补全 @keyframes 关键帧代码）
题目：以下代码定义了一个“心跳”动画（元素先放大后缩小），请补全关键帧中的 transform 属性值。
css
复制代码
@keyframes heartbeat {
0%, 100% { transform: _______; } /* 起始和结束状态：原始大小 */
50% { transform: _______; } /* 中间状态：放大 1.5 倍 */
}
.heart { animation: heartbeat 1s infinite; }答案：
0%, 100%: scale(1)
50%: scale(1.5)
3. 编程题（实现“图片轮播”动画）
题目：使用 CSS3 animation 实现一个包含 3 张图片的轮播动画，要求：
- 每张图片显示 2 秒，切换过程平滑过渡（0.5 秒）；
- 无限循环播放；
- 图片尺寸为 400px × 300px，居中显示。
参考实现：
HTML 结构：
html
复制代码
<div class="carousel">
<img src="img1.jpg" alt="图1" class="carousel-img">
<img src="img2.jpg" alt="图2" class="carousel-img">
<img src="img3.jpg" alt="图3" class="carousel-img">
</div>CSS 代码：
css
复制代码
.carousel {
width: 400px;
height: 300px;
margin: 20px auto;
overflow: hidden; /* 隐藏超出容器的图片 */
position: relative;
}
.carousel-img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0; /* 默认隐藏 */
animation: carousel 6s infinite; /* 总时长 = 3张 × (2s显示 + 0.5s切换) = 7.5s？修正：每张显示2s+切换0.5s，3张总周期为 3×2.5=7.5s */
}
/* 分别设置每张图片的动画延迟，实现轮播效果 */
.carousel-img:nth-child(1) { animation-delay: 0s; }
.carousel-img:nth-child(2) { animation-delay: 2.5s; }
.carousel-img:nth-child(3) { animation-delay: 5s; }
@keyframes carousel {
0% { opacity: 0; }
5% { opacity: 1; } /* 切换开始：0.5s内从透明到显示 */
30% { opacity: 1; } /* 显示2s（5%~30%对应 0.375s~2.25s，约2s） */
35% { opacity: 0; } /* 切换结束：0.5s内从显示到透明 */
100% { opacity: 0; }
}动画效果说明：
每张图片的动画周期为 7.5 秒（3 张图片 × 2.5 秒/张），通过 animation-delay 错开启动时间。在关键帧中，5%~35% 阶段（对应 0.375~2.625 秒）图片保持显示状态，其余时间透明，从而实现“显示 2 秒 + 平滑切换 0.5 秒”的轮播效果。