静态图标主要用于传达信息、动效则赋予了它更多的功能。例如：引导用户进行下一步操作、将用户的目光聚焦到重要的信息上、使用户的操作得到更好的反馈、提升产品的品牌形象。
(本文主要来源于超级变变变_哔哩哔哩_bilibili一是为了记录和学习二是为了做一个简单实现加深印象)
设计原则
图标动效通常不会很复杂、只会使用一些基本的动画属性。将不同的属性进行组合，可以实现非常丰富的效果，效果变化越复杂、持续时间也就越长。简单的动效只需要100ms(通常只有一个动画属性)，一般的需要200ms，复杂的动效需要500ms(通常涉及多个动画属性以及大面积的图形变化)。除了时间，动效的设计同样需要遵顼一定的物理规律，俗称“弹性”。
动态效果分类
通常分为三大类
状态变化
常见于APP底部导航的图标、主要是选中和未选中两种状态之间的切换。
图形变化
切换日夜模式时、图标从太阳变成了月亮、功能性也会发生变化。
循环变化
刷新、扫描、搜索效果。首尾状态相同、多用于反馈系统的运行状态。
图标动效的动画属性
以下的图标的动画效果均可通过鼠标移入来触发。可审查元素查看具体实现，或者直接访问animate-icon
位移
缩放
旋转
透明
填充
描边
路径变化
多种动画属性的组合
参考 & 引用
仅使用 CSS 为任何 SVG 图标制作动画 | 使用 Html CSS 的 SVG 描边动画_哔哩哔哩_bilibili
SVG-Morpheus实现SVG图标图形间的补形动画 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
Animated Icons – 3700+ High Quality Animated Icons (icons8.com)
https://codepen.io/chriscoyier/pen/wvBZyXX
https://github.com/alexk111/SVG-Morpheus
https://juejin.cn/post/6844903513768755214
https://css-tricks.com/guide-svg-animations-smil/
https://mapsvg.com/blog/svg-animation-examples
https://medium.com/swlh/animating-svgs-with-pure-html-and-css-e69eab12a5e