svgでバウンドするアニメーションを作る

円の中心を水平方向・垂直方向でそれぞれ0から100％の間を往復するように設定すると，描画領域の四辺でバウンドするような動きを出せる．svgではanimate要素を使ってこのような動作を簡潔に表現できる．canvas要素を用いた場合はいちいち座標を計算せねばならず，若干見通しが悪い．

と言ったように，メリットしか無いように見えたのだが…



作っていて気がついたが，なぜか非常に動作が重い．いろいろな描画要素が重なっているから？
それとchromeだとワープしていたり，operaだと離散的に値が変化していたりと，どうもブラウザごとに微妙な動作の差異があるみたい．

<svg height="150px" width="100%">
    <circle cx="0" cy="0" fill="red" r="20px">
        <animate attributename="cx" begin="0s" calcmode="linear" dur="10s" keytimes="0;0.5;1" repeatcount="indefinite" values="0;100%;0"/>
        <animate attributename="cy" begin="0s" calcmode="linear" dur="7" keytimes="0;0.5;1" repeatcount="indefinite" values="0;100%;0"/>
    </circle>
</svg>  

どうやらoperaでは％での値の指定が上手く行かないようだ．