全部学科

Web前端

TypeScript vue CSS HTML javascript pinia vite

通用技术

redis git docker nginx mysql zookeeper rabbitmq

GO后端

golang gorm gin

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Python全栈

NodeJS全栈

小程序首页

📝 1 篇文章 20 道配套习题

CSS动画与过渡专题

专题说明

本专题系统讲解CSS过渡(transition)与动画(animation)的核心知识，包括基本概念、属性配置、关键帧定义、时间函数选择以及性能优化策略。

学习目标

理解CSS过渡的基本原理与触发机制
掌握transition各子属性的配置方法
熟练使用@keyframes定义动画关键帧
正确配置animation的各项参数
掌握动画性能优化的核心原则

学习内容

CSS过渡基础：过渡概念、触发条件、简写语法
CSS过渡属性：property、duration、timing-function、delay
CSS动画关键帧：@keyframes定义、from/to、百分比关键帧
CSS动画属性：name、duration、timing-function、delay、iteration-count、direction、fill-mode、play-state
性能优化：transform/opacity优先、重排重绘避免、will-change使用

学习建议

先掌握过渡的基本用法，再学习动画的复杂配置
重点理解过渡与动画的核心区别：触发方式与循环支持
性能优化是关键，优先使用transform和opacity实现动画
实际项目中根据需求选择过渡或动画，避免过度使用

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1

单选题

CSS过渡（transition）的主要作用是什么？

A

定义动画的关键帧序列

B

实现CSS属性值变化时的平滑过渡效果

C

创建无限循环的动画

D

控制元素的显示和隐藏

2

填空题

CSS过渡的基本语法：transition: ______ ________ ________ ________;

3

判断题

CSS过渡需要触发条件（如hover、focus、点击等）才能启动，不能自动执行。

A

对

B

错

4

单选题

transition-property: all; 表示什么含义？

A

不过渡任何属性

B

只过渡transform和opacity属性

C

过渡所有可过渡的CSS属性

D

只过渡width和height属性

5

单选题

设置 transition-duration: 500ms; 表示过渡持续时间是多少？

A

500秒

B

0.5秒

C

50秒

D

5秒

6

填空题

transition-timing-function常用值：

慢开始→加速→慢结束：______
匀速过渡：______
慢开始→加速：_______
加速→慢结束：________

7

单选题

transition-delay: 200ms; 的作用是什么？

A

过渡持续200毫秒

B

过渡在200毫秒后开始执行

C

过渡速度为200毫秒每单位

D

过渡重复200次

8

多选题

以下哪些是transition的子属性？

A

transition-property

B

transition-duration

C

transition-timing-function

D

transition-delay

E

transition-iteration-count

9

判断题

可以为多个CSS属性分别设置不同的过渡效果，如：transition: width 0.3s ease, height 0.5s linear;

A

对

B

错

10

单选题

CSS动画的关键帧使用什么规则定义？

A

@transition

B

@keyframes

C

@animation

D

@frame

11

填空题

@keyframes规则中：

______ 表示动画起始状态（等同于0%）
______ 表示动画结束状态（等同于100%）

12

单选题

以下@keyframes定义中，哪个写法是正确的？

A

@keyframes myAnim { start: 0%; end: 100%; }

B

@keyframes myAnim { 0% { color: red; } 100% { color: blue; } }

C

@keyframes { myAnim 0% { color: red; } }

D

@animation myAnim { 0% to 100%; }

13

判断题

@keyframes规则可以定义多个中间关键帧，如0%、25%、50%、75%、100%，每个关键帧可以设置不同的样式状态。

A

对

B

错

14

单选题

animation-name: fadeIn; 的作用是什么？

A

定义新的关键帧动画

B

引用已定义的@keyframes动画名称

C

设置动画的持续时间

D

设置动画的播放次数

15

填空题

animation-duration设置动画完成一个周期所需的时间，如 ______ 表示动画周期为2秒，______ 表示动画周期为500毫秒。

16

单选题

设置 animation-iteration-count: infinite; 表示动画会怎样执行？

A

动画执行一次后停止

B

动画无限循环播放

C

动画不执行

D

动画执行两次

17

单选题

animation-fill-mode: forwards; 的作用是什么？

A

动画结束后回到起始状态

B

动画结束后保持最后一帧的状态

C

动画开始前应用第一帧状态

D

动画无限循环播放

18

单选题

以下场景中，更适合使用CSS动画(animation)而非过渡(transition)的是？

A

按钮hover时背景颜色平滑变化

B

页面加载时元素从透明渐变为可见并循环闪烁

C

菜单展开收起的高度变化

D

输入框获得焦点时边框颜色变化

19

填空题

高性能动画应优先使用 _________ 和 _______ 属性，因为它们只触发 ______ 阶段，不会触发重排和重绘。

20

单选题

CSS过渡和动画的主要区别是什么？

A

过渡用于颜色变化，动画用于位移变化

B

过渡需要触发条件，动画可以自动执行

C

过渡只能执行一次，动画可以循环执行

D

B和C都是正确答案

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验