SVGは、開発軌道に合わせて、小さなボールの動きを使用します

使用SVG、トラックの発展に従い、コードのボールの動き：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>ドキュメント</ タイトル> 
    < スタイル>
        } 
        .TO-アニメーション{ 
            幅：は50px 。
            高さ：は50px ; 
            背景：緑; 
            位置：絶対; 
            トップ：-25px ; 
            左：-25px ; 
            国境半径：25ピクセル; 
            不透明度：1 ; 
        } 
        SVG { 
            位置：絶対。
            トップ：0 ; 
            左：0 ; 
            幅：640ピクセル; 
            高さ：480PX 。
            表示：#FFF ; 
        } 
        のパス{ 
            フィル：なし。
            ストローク：赤; 
        } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
    < divのクラス= "へ-アニメイト" > </ divの> 
    < SVG のxmlns = "http://www.w3.org/2000/svg"  > 
        < パスD=「M 227.6035,38.929859 C -17.098、-6.615379 -35.43714、-5.654746 -53.72008、-5.654746 -28.88045,0 -78.608562,23.436783 -69.27063,60.788513 8.30718,33.228734 73.51169、-17.343534 73.51169,25.446354 0,111.52514 -170.5191138,45.29238 - 156.919185,154.09181 2.924851,23.39881 26.328181,58.41063 40.996904,76.33907 58.597841,71.61958 74.550601、130.059141 -43.6165、-32.51479 51.57633,10.31527 43.90688,155.47922 168.22868,115.92228 167.51141、-53.29909 -59.7547、-112.77835 8.48212、-169.64236 48.39108、-40.32591 95.07686 、193.67503,8.48212 36.29006、-31.10577 60.13025、-119.23372 -1.41369 92.99483、-145.6097 C 531.50007,113.83552 494.02863,119.47348 466.5165,101.13206 447.3794,88.373995 454.4009,55.952532 431.17434,45.99829 381.32712,24.635198 348.07325,65.928309 303.94257,71.444645 274.33127,75.146057 256.00673 、42.987462 227.6035,38.929859 Z」
        />
    </ SVG > 
    < スクリプト> 
        VAR 開始= ）（performance.now。
        VaRのボックス= document.querySelector（' .TO-アニメーション' ）;
        VaRのパス= document.querySelector（' パス' ）;
        VAR LEN = path.getTotalLength（）。

        関数フレーム（）{
             VAR 今= performance.now（）。
            VaRの相= （（今- ）スタート/ 6000 ）％ 1 。
            VaRの点= path.getPointAtLength（LEN * 相）。
            box.style.transform =  ' translate3d（'  + point.x +  ' PX、'  + point.y +  ' PX、0）' 。// IE 
            box.style.WebkitTransform =  ' translate3d（'  + point.x +  ' PX、'  + point.y +  ' PX、0）" ; // クローム＆サファリ   
            requestAnimationFrameの（フレーム）。
        } 

        フレーム（）。
    </ スクリプト> 
</ ボディ> 
</ HTML >