[分享]css动画和svg动画区别

在网页设计中，动画是一种重要的元素，能够增强用户体验。而在动画中，CSS动画和SVG动画是两种常见的形式。它们各自有着一些不同的特点。CSS动画是基于CSS3实现的一种动画效果。它通过改变样式的属性值...

在网页设计中，动画是一种重要的元素，能够增强用户体验。而在动画中，CSS动画和SVG动画是两种常见的形式。它们各自有着一些不同的特点。

CSS动画是基于CSS3实现的一种动画效果。它通过改变样式的属性值来实现动画效果。CSS动画的优点是可维护性好，代码简单易懂。但CSS动画相对来说比较受限制，很难实现复杂的动画效果。比如可以实现简单的淡入淡出、旋转、移动等效果，但无法实现自由变形、形状变换等效果。

/* CSS示例代码 */
.animation {
  animation: fadein 2s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
} 

而SVG动画是基于SVG（Scalable Vector Graphics）实现的一种动画效果。它通过改变SVG元素的属性值来实现动画效果。与CSS动画相比，SVG动画具有更加丰富的图形效果，可以实现复杂、精美的动画效果。SVG动画的优点是可交互性强，可扩展性好，可以实现更多的动画效果。但缺点是代码相对CSS动画较为复杂。

/* SVG示例代码 */
<svg height="100" width="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
    <animate attributeName="r" from="1" to="40" dur="3s" repeatCount="indefinite" />
  </circle>
</svg> 

总体来说，CSS动画适用于简单的动画效果，如透明度、位移、旋转等；SVG动画适用于复杂的动画效果，如形状变换、数学路径运动等。当然，在实际场景中，也可以将两者结合使用，达到更好的效果。