CSS动画与过渡专题测试

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

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

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

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

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

transition-timing-function常用值：

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

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); 对应哪个预设时间函数？

以下哪些是transition的子属性？

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

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

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

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

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

animation-direction属性值：

• ______：正常方向播放（从from到to）
• _______：反向播放（从to到from）
• _________：奇数次正向，偶数次反向交替播放
• _________________：奇数次反向，偶数次正向交替播放

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

animation简写属性 animation: fadeIn 1s ease 0.5s 2 alternate forwards running; 包含哪些参数？

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

以下哪些CSS属性最适合用于高性能动画（只触发合成层更新，不触发重排重绘）？

关于CSS动画属性，以下说法正确的有？

CSS动画比JavaScript动画性能更好，因为CSS动画可以由浏览器合成层处理，且能与浏览器渲染周期同步。