CSS3+SVG实现动画

上个项目用到svg实现一个水流的动画，鉴于没学习几天，所以懂的也不多，就此分享一下。
首先svg是什么，svg可缩放矢量图形，可缩放矢量图形是基于可拓展标记语言，用于描述二维矢量图形的一个图形格式。svg和其他图像格式相比，使用svg的优势在于：
svg图像可以通过文本编辑器来创建和修改
svg图像可被搜索，索引，脚本化或压缩
svg是可伸缩的
svg图像可在任何的分辨率下被高质量地打印
svg可在图像质量不下降的情况下被放大
svg它可以直接嵌入html，并且可以当做DOM节点去操作，加class类名，定义动画，都是可以的。上一段简单的代码吧

html

css

.comm {
    stroke: #14F2F2;
    fill: rgba(255, 255, 255, 0);
    stroke-miterlimit: 10;
    stroke-dashoffset: 1000;
    stroke-opacity: 0.5;
    stroke-miterlimit: 10;
}
.warter {
    animation: run 5s linear infinite;
    opacity: 0.7;
    stroke-width: 9;
}
@keyframes run {
    from {
        stroke-dasharray: 40, 6;
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dasharray: 40, 6;
        stroke-dashoffset: 0;
    }
}
.warterfan{
    animation: runfanh 5s linear infinite;
    opacity: 0.7;
    stroke-width: 9;
}
@keyframes runfanh {
    from {
        stroke-dasharray: 40, 6;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dasharray: 40, 6;
        stroke-dashoffset: 1000;
    }
}

好吧，或许你会说‘我的天，这么多么，还这么乱，怎么写’，简单的介绍一个它有什么东西，有什么属性
标签
矩形
rect元素的width和height属性可定义矩形的高度和宽度
style属性用来定义CSS属性
CSS的fill属性定义矩形的填充颜色（rgb值，颜色名或者十六进制值）
CSS的stroke-width属性定义矩形边框的宽度
CSS的stroke属性定义矩形边框的颜色
X属性定义矩形的左侧位置
Y属性定义矩形的顶端位置
CSS的fill-opacity属性定义填充颜色的透明度
CSS的stroke-opacity属性定义笔触颜色透明度
CSS的opacity属性定义整个元素的透明值
rx和ry属性可使矩形产生圆角
圆形
cx和cy属性定义原点的X和Y坐标。如果省略CX和CY，圆的中心会被设置为（0,0）
r属性定义圆的半径
椭圆
cx属性定义圆点的X坐标
cy属性定义圆点的Y坐标
rx属性定义水平半径
ry属性定义垂直半径
线
x1属性在X轴定义线条的开始
y1属性在Y轴定义线条的开始
x2属性在X轴定义线条的结束
y2属性在Y轴定义线条的结束
折线
points属性定义多边形每个角的X和Y的坐标
多边形
路径
M = moveto 移至
l = lineto 画连接线
h = horizontal lineto 水平线
v = vertical lineto 垂直线
c = curveto 弧线
s = smooth curveto 光滑的弧线
q = quadratic belzier curve 二次Belzier曲线
t = smooth quadratic Belzier curveto 光滑的 二次Belzier曲线
a = elliptical arc 椭圆的
z = closepath 闭合线
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。