CSS animation作成

CSSでアニメーションを付ける方法です。

下記例では、四角の枠が斜め下に動きながらバウンドしたような動きになっています。

CSSプロパティのanimation, keyframes, transform, translateの使い方がわかります。

@keyframes 関数名 {  
  from  { transform: translate(最初の位置(x,y));}
  50%   { transform: translate(中間の位置(x,y));}
  to    { transform: translate(最後の位置(x,y));}
}

div { 
  animation: 動作時間   動き方 動作遅れ時間   動作回数  動作方向  関数名;
}

下記はサンプルコードと実行結果@CodePen

See the Pen 200517_animation by しげ＠元プログラマ (@sigeo5) on CodePen.