SVG+CSS3 简单线条动画

CSS3：

#g1 path {
  stroke-dasharray: 1000;/*当线条很长很长的时候，这个值也要相应的的增大，否则会导致线条变成线段*/
  stroke-dashoffset: 1000;/*当线条很长很长的时候，这个值也要相应的的增大，否则会导致线条变成线段*/
  animation: dash 5s linear infinite;
}

@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

属性说明：
stroke-dasharray 表示虚线描边。可选值为：none, dasharray, inherit. 其中，none表示不是虚线；为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值，也可以是百分比值；inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为：percentage, length, inherit. 百分比值，长度值，继承。

@keyframes定义和用法

"通过 @keyframes 规则，您能够创建动画。"

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
----------------------------------------------
Firefox 支持替代的 @-moz-keyframes 规则。

Opera 支持替代的 @-o-keyframes 规则。

Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则

SVG：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">

  <g id="g1">
   <path id="svg_1" class="path1" d="m55.5,78.45001c11,-9 65,-30 64.5,-30.45001c0.5,0.45001 69.5,-17.54999 78.5,28.45001c9,46 -42,121 -42.5,120.54999" stroke-width="1.5" stroke="red" fill="transparent"/>
  </g>
</svg>

如果不用CS3,下面这种方法可以实现动画：
这种方法是单次循环，还不知道怎么实现多次循环，求指教。

  <script>
    var path = document.querySelector('path1');
    var length = path.getTotalLength();
    // Clear any previous transition
    path.style.transition = path.style.WebkitTransition =
      'none';
    // Set up the starting positions
    path.style.strokeDasharray = length + ' ' + length;
    path.style.strokeDashoffset = length;
    // Trigger a layout so styles are calculated & the browser
    // picks up the starting position before animating
    path.getBoundingClientRect();
    // Define our transition
    path.style.transition = path.style.WebkitTransition =
      'stroke-dashoffset 3s ease-in-out ';
    // Go!
    path.style.strokeDashoffset = '0';
</script>

运行效果：
是一条重复出现的线条动画；

一种在线编辑器：http://codepen.io/chriscoyier/pen/bGyoz

参考：纯CSS实现帅气的SVG路径描边动画效果