caskkot

日常のことから、商品レビューまで何でもありの雑記ブログ(キャスコット)

メモ

【cssメモ】cssアニメーション一覧

投稿日:2019年12月16日 更新日:

cssのメモとして残しますー!

テンプレート

animation: name 0.6s ease-in-out infinite alternate;
-webkit-animation: name 0.6s ease-in-out infinite alternate;
-moz-animation: name 0.6s ease-in-out infinite alternate;
@keyframes name{
      0%{
      }
      100%{
      }
}
@-webkit-keyframes name{
      0%{
      }
      100%{
      }
}
@-moz-keyframes name{
      0%{
      }
      100%{
      }
}

単語説明

・animation-name 適用するキーフレームの名前
・animation-duration かかる時間
・animation-timing-function どのようなアニメーションするか
・animation-delay 何秒後に開始するか
・animation-iteration-count 繰り返す回数
・animation-direction 反転再生
・animation-fill-mode アニメーション実行前・実行後の状態
・animation-play-state アニメーションを一時停止・再生させる
・@keyframes 変化の指定

各詳細

animation-name 適用するキーフレームの名前

animation-duration かかる時間

0s:初期値
1sなど
100msなど

animation-timing-function どのようなアニメーションするか

ease:初期値
ease-in:入りがなめらか
ease-out:最後がなめらか
ease-in-out
linear

animation-delay 何秒後に開始するか

0:初期値
1sなど
100msなど

animation-iteration-count 繰り返す回数

1:初期値
1.5:小数点も可
infinite:無限

animation-direction 反転再生

normal:初期値・アニメーションが終わると初期位置に戻る
alternate:逆方向も実行する
reverse:毎回逆方向を実行する
alternate-reverse:逆方向から実行して繰り返す

animation-fill-mode 実行前・実行後の状態

none:初期値
forwards:最後の状態をキープ
backwards
both

animation-play-state 一時停止・再生させる

running:初期値、再生
paused:一時停止

-メモ
-

執筆者:

関連記事

【jQueryメモ】横向き縦向き判定

jQueryのメモとして残しますー! 一覧 読み込み時 回転時 縦で持っているか横で持っているかページ読み込み時に調べる $(function () { var orientation = windo …

【webメモ】youtube、videoタグなどの動画のレスポンシブ

webのメモとして残しますー! どこかのサイトを参考にさせてもらったんですが、忘れてしまったよ… 一覧 動画のアスペクト比 テンプレート よく使うアスペクト比 動画のアスペクト比 16:9で横幅合わせ …