前端 CSS 面试题, 动画
前端 CSS 面试题, 动画
QA
Step 1
Q:: 什么是 CSS 动画？它有哪些基本的应用场景？
A:: CSS 动画指的是通过 CSS 来定义和控制 HTML 元素的动画效果，主要用于页面中元素的过渡、移动、旋转、缩放等动态效果。CSS 动画可以让网页交互性更强，视觉效果更加丰富，常用于按钮的悬停效果、菜单的展开收起、加载动画等。
Step 2
Q:: 如何使用 CSS 的 @keyframes 规则创建动画？
A:: 使用 @keyframes 规则可以定义 CSS 动画的关键帧。关键帧是描述动画在不同时间点的样式的规则。通过定义 0% 到 100% 的不同阶段，可以让元素在不同的时间点呈现不同的状态。然后通过使用 animation 属性将这个动画应用到元素上。例如：@keyframes move { 0% { left: 0; } 100% { left: 100px; } }。
Step 3
Q:: CSS 动画和 CSS 过渡（transitions）有什么区别？
A:: CSS 动画和 CSS 过渡都是用于创建动画效果的工具。主要区别在于，CSS 过渡是用于两个状态之间的过渡，依赖于元素状态的变化（如 :hover），而 CSS 动画则可以创建复杂的、循环的动画，不依赖于状态变化。过渡适合简单的变化，而动画适合更复杂的场景。
Step 4
Q:: 如何控制 CSS 动画的重复次数和播放速度？
A:: 可以使用 animation-iteration-count 属性来设置动画的重复次数，值为 'infinite' 时表示无限循环。使用 animation-duration 属性来控制动画的播放时长（即每次动画的完成时间）。此外，还可以用 animation-timing-function 属性控制动画的节奏（如线性、加速、减速等）。
Step 5
Q:: 如何暂停和恢复 CSS 动画？
A:: 使用 animation-play-state 属性可以控制动画的播放状态。值 'paused' 表示暂停，'running' 表示恢复运行。例如，在用户悬停某元素时暂停动画，可以在 :hover 伪类中设置 animation-play-state: paused。
Step 6
Q:: 你如何通过 CSS 动画提高用户体验？
A:: 通过 CSS 动画，可以在页面中创建引导性强、反应灵敏的视觉效果，帮助用户更直观地理解界面变化。例如，加载动画可以告诉用户页面正在处理请求，而不至于在等待时感到迷茫。合理使用动画可以增强用户体验，但过度使用则可能影响性能和用户感受。
Step 7
Q:: CSS 动画的性能如何优化？
A:: 为优化 CSS 动画性能，应尽量避免重排和重绘，使用 transform 和 opacity 进行动画效果，因为这两者不会引起布局的变化。同时，尽量减少动画的数量和复杂性，并考虑使用 will-change 属性来提前通知浏览器进行优化。