CSS动画（animation）和过渡（transition）是前端开发中常用到的功能，它们可以使网页更加生动、有趣，并增强用户体验。但是，在设计和实现这些效果时，需要考虑到其性能影响。
动画（animation）和过渡（transition）的区别
在讨论性能之前，我们先来了解一下这两个概念的区别。
动画（animation）是一种通过不断改变元素的属性值（如位置、大小、颜色等）来创造出逐帧动画效果的技术。动画通常需要使用@keyframes规则来定义一个或多个关键帧，其中指定元素在不同时间点的属性值，浏览器会根据这些关键帧自动计算出中间状态的属性值，从而呈现出流畅的动画效果。
过渡（transition）则是一种通过短暂地改变元素的属性值来产生平滑的效果。与动画不同的是，过渡只需要指定起始和结束状态的属性值，浏览器会自动计算出中间状态的属性值。过渡通常通过:hover或:focus等伪类选择器来触发。
性能考虑
尽管动画和过渡都可以为网页添加生动度和互动性，但它们也可能会对网页性能产生不良影响。这是因为动画和过渡会使得浏览器进行大量的重绘操作，从而增加了CPU和GPU的负荷，降低了页面的响应速度。
以下是一些优化技巧，可以帮助我们在使用动画和过渡时提高性能：
1. 尽量减少重绘次数
每次执行动画或过渡都会导致浏览器进行重绘操作，因此尽量减少这些操作的次数可以显著提高性能。例如，在使用动画时，通过将元素的position属性设置为fixed或absolute，可以避免元素在文档流中的重绘。在使用过渡时，则可以通过合并多个变化属性（如同时改变位置和颜色）来减少重绘次数。
2. 使用硬件加速
现代浏览器通常支持硬件加速，即使用GPU来处理页面的绘制。在某些情况下，启用硬件加速可以显著提高动画和过渡的性能。要启用硬件加速，可以使用transform或opacity属性，并通过will-change属性来提示浏览器进行优化。
3. 使用requestAnimationFrame
使用requestAnimationFrame API可以实现更平滑的动画效果，并且可以避免在不必要的时候进行重绘操作。requestAnimationFrame会在下一次浏览器绘制前执行回调函数，这意味着我们可以把动画循环放在回调函数中，让浏览器在适当的时候绘制元素。
示例代码
以下是一个简单的例子，演示了如何使用CSS transition和animation来实现一个简单的动画效果：
-- -------------------- ---- -------
--------- -----
------
------
-------
---- -
------ ------
------- ------
----------------- ----
----------- ----- -- ------------
---------- ---- -- ---------
-
---------- ---- -
---- - ---------- ------------- -
-- - ---------- ---------------- -
-
--------
-------
------
---- ------------------
------- -------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------