SVG+CS3 단순 선 애니메이션

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:

"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">

  id="g1">
   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"/>
  

만약에 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 경로 렌더링 애니메이션 구현