不需要借助JS和CSS3就能完成的动画（二）

1、接上篇SVG动画的属性详解

1.1 animation参数

1.1.1 attributeName

你想改变的属性名称，① 可以是元素直接暴露的属性，例如，以上案例出现的改变x, y又或者font-size; ② 可以是CSS属性。例如，透明度opacity.

1.1.2 attributeType

attributeType支持三个固定参数，CSS/XML/auto. 用来表明attributeName属性值的列表。x, y以及transform就属于XML, opacity就属于CSS. auto为默认值，自动判别的意思（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。

我想大家都有和我一样的疑问：“既然浏览器酱可以自己判断属性类别，那这个属性还有什么意义吗？”可能某些属性，XML有其作用，CSS也有其作用，例如font-size, 此时就需要明确下归属。

1.1.3 from to by values dur

from = ““

动画的起始值。

to = ““

就是to的值

指定动画的结束值。（绝对）

by=””

by最后的结束值=from的值+by的值

指定动画的结束值（相对）

Values=””（可以存在多个）

dur = ““

完成动画的时间

1.1.4 begin end

begin指动画开始的时间，看上去很简单。设个时间，延迟嘛~~实际上非也非也，上面出现的beigin="3s"只是最简单最基本的表示。

begin的定义是分号分隔的一组值。看到没？是一组值，单值只是其中的情况之一。例如，beigin="3s;5s"表示的是3s之后动画走一下，6s时候动画再走一下（如果之前动画没走完，会立即停止从头开始）。所以，如果一次动画时间为3s, 即dur="3s"，同时没有repeatCount属性时候，我们可以看到动画似乎连续执行了2次。

begin的值可以是触发事件

begin的值可以是某个动画执行n次之后

1.1.5 repeatCount,repeatDur

repeatCount表示动画执行次数，可以是合法数值或者”indefinite“（动画循环到内存耗尽）。

repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite（动画循环到内存耗尽）。

作者：陆家嘴种菜
链接：https://www.jianshu.com/p/f0f5e2ababea