アニメーション 見本
回数を選択

　

  1. アクション1:「ボタン1(デフォルト)」 / 色:グリーンから透明(opacity:0)に変化する / シェイプ:正方形(50px × 50px) / キーフレーム:左から右へ - 水平に240pxほど往復移動 / カウント:1回(デュレーション:1秒 + 1秒=合計2秒)

  2. アクション2:「ボタン2」でスタート / 色:レッド / シェイプ:正方形(50px × 50px) + 角丸 / キーフレーム:回転 rotate(360deg) / カウント:2回(デュレーション:1秒 + 1秒)

  3. アクション3:「ボタン3」でスタート / 色:グレー / シェイプ:円(50px × 50px) / キーフレーム:上から下へ - 垂直に240pxほど移動 / カウント:3回(デュレーション:2秒 + 2秒 + 2秒=合計6秒)

  4. アクション4:「ボタン4」でスタート / 色:グレー→レッド / シェイプ:円(50px × 50px) / キーフレーム:上から下へ - 垂直に100pxほど移動 / カウント:4回(最初だけ待つ時間1秒 background-color:red; + background-color:gray; / delay:1s +デュレーション:2秒 + 2秒 + 2秒 + 2秒=合計8秒)

  5. アクション5:「ボタン5」でスタート / 色:グリーン=ブルー=パープル=レッド, その後ブラック=レッド=パープル=ブルー / シェイプ:円(50px × 50px) / キーフレーム:左から右へ - 水平に240pxほど移動=上から下へ - 垂直に240pxほど移動 / 左から右へ - 水平に240pxほど移動=下から上へ - 垂直に240pxほど移動, その後軌跡がバックする direction:alternate / カウント1回(デュレーション:0.5秒 + 0.5秒 + 0.5秒 + 0.5秒, その後逆に)

  6. アクション6:「ボタン6」でスタート / 色:ブラック / シェイプ:正三角形 / キーフレーム:左から右へ - 水平に240pxほど拡大しながら移動 / カウント:無限 infinite (デュレーション:一回につき1秒) / 拡大率は片の長さが1.5倍 transform:scale(1.5)


◀◀