CSS动画_SVG动画__比较归纳

1、CSS3 @keyframes 规则.html（http://www.w3school.com.cn/cssref/pr_keyframes.asp）

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

　　1.1、css 多点动画效果

　　　　ZC：貌似 没有简单的方式实现... baidu搜索“css 多点动画效果”，其中一篇文章：

　　　　　　CSS3中Animation为同一个元素添加多个动画效果 - 滴水穿石！ - 博客园.html（https://www.cnblogs.com/qinglin/p/7794253.html）

2、SVG之Animation - 前端学习笔记 - SegmentFault.html（https://segmentfault.com/a/1190000009371194）

 

多节点动画

实现一个属性的连续变化有两种方式：

1. 多个<animate>组合
2. 使用value + keyTimes + calcMode属性

3、

4、

5、