<!-- 1アニメーション ease-->
<div>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="250" fill="blue">
      <!-- SVGのイージングは calcMode="spline" keyTimes keySplines の3つが必須 -->
      <!-- fill="freeze"でアニメーション終了状態で固定(fill="remove"で初期状態に戻す) -->
      <!-- keyTimes セミコロン(;)区切りの値の変化が起こるタイミングのリスト.アニメーション開始(0)から終了(1)までの割合で表す -->
      <!-- keySplines keyTimesで区切られた各時区間における値の変化を3次ベジェスプライン曲線で表す -->
      <animate id="animation" attributeName="r" attributeType="xml" from="250" to="100" begin="0s" dur="5s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.25 0.1 0.25 1.0" />
    </circle>
  </svg>
</div>
<!-- 1アニメーション(リピート) linear-->
<div>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="250" fill="blue">
      <animate id="animation" attributeName="r" attributeType="xml" from="250" to="100" begin="0s" dur="5s" fill="freeze" repeatCount="3" calcMode="spline" keyTimes="0;1" keySplines="0.0 0.0 1.0 1.0" />
    </circle>
  </svg>
</div>
<!-- 複数アニメーション(直列 秒数判定)-->
<div>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="250" fill="blue">
      <!-- ease-in -->
      <animate id="animation1" attributeName="r" attributeType="xml" from="250" to="100" begin="0s" dur="5s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.42 0 1.0 1.0" />
      <!-- ease-out -->
      <animate id="animation2" attributeName="r" attributeType="xml" from="100" to="250" begin="5s" dur="5s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.0 0.0 0.58 1.0" />
    </circle>
  </svg>
</div>
<!-- 複数アニメーション(直列 終了判定) ease-in-out-->
<div>
  <svg width="500" height="500">
    <circle cx="250" cy="250" r="250" fill="blue">
      <animate id="animation3" attributeName="r" attributeType="xml" from="250" to="100" begin="0s" dur="5s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.42 0.0 0.58 1.0" />
      <animate id="animation4" attributeName="r" attributeType="xml" from="100" to="250" begin="animation3.end" dur="5s" fill="freeze" calcMode="spline" keyTimes="0;1" keySplines="0.42 0.0 0.58 1.0" />
    </circle>
  </svg>
</div>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.