前端经典面试题合集, 用 CSS 和 JS 来实现动画分别有哪些优缺点?

Step 1

Q:: 用 CSS 和 JS 来实现动画分别有哪些优缺点？

A:: CSS 动画优点包括性能较高、易于使用和维护、支持硬件加速。缺点是功能有限、缺少复杂逻辑控制。JS 动画优点在于功能强大、可实现复杂的动画效果、控制灵活。缺点是对性能要求较高、代码复杂度大、可能导致页面卡顿。

Step 2

Q:: 什么是 CSS 动画？如何使用？

A:: CSS 动画是一种使用 CSS3 的动画属性来创建视觉效果的方法。常用属性包括 @keyframes、animation、transition。通过定义 @keyframes 来描述动画的关键帧，然后使用 animation 属性来应用这些关键帧到元素上。

Step 3

Q:: CSS transition 和 animation 有什么区别？

A:: CSS transition 是针对元素的状态变化设置过渡效果，主要用于两个状态之间的过渡。CSS animation 则是通过关键帧定义多状态的变化，可以实现复杂的动画效果，循环播放等。

Step 4

Q:: JavaScript 实现动画的常用库有哪些？

A:: JavaScript 实现动画的常用库包括 jQuery、GSAP（GreenSock Animation Platform）、Anime.js、Velocity.js 等。这些库提供了丰富的 API 来控制动画的创建和管理。

Step 5

Q:: 如何优化 JavaScript 动画的性能？

A:: 优化 JavaScript 动画的性能可以从以下几个方面入手：1. 使用 requestAnimationFrame 代替 setTimeout 或 setInterval；2. 避免频繁的 DOM 操作，尽量将多次操作合并；3. 使用 CSS3 硬件加速；4. 尽量减少重绘和重排。