用途
新着
履歴
分類

CSS3 アニメーション

CSS3 アニメーション
ここではCSS3によるアニメーションを紹介します。

JavaScriptやSVGなどでもアニメーションの表現できますが、気軽に作れる点ではCSS3が一番長けてると思います。

ただし、幾つかのブラウザでは開発中だったり、古いブラウザでは機能しない場合がありますので、リリース時は各種ブラウザで確認してください。

CSS3のアニメーションでは「キーフレーム」を使って動きを定義していきます。アニメーションが完了するまでの時間のどのタイミングで、どのようなスタイルに変化するのかを指定します。

無限ループや、回数指定、逆再生、一時停止などもできます。そのままに利用しても、いろんな表現ができますが、jQueryなどとの連動をするとさらに複雑なことができます。まず、ここではシンプルなパターンのみをご紹介します。

@keyframes name {
  0% { スタイルの指定 }
  50% { スタイルの指定 }
  100% { スタイルの指定 }
}
@-webkit-keyframes name {
  webkit系のブラウザがまだ開発中で、正しく動かない場合はこちらにも同様の記述が必要です。
}

「name」の部分がアニメーションの名前になり、下記の属性に応じて、各IDやClassに定義していきます。

#demo {
	        animation: name 3s infinite alternate;
	-webkit-animation: name 3s infinite alternate; //webkit系対応
}
CSSアニメーションサンプル

animation プロパティ

animation-name: name;

アニメーションの名前指定。

animation-duration: 5s;

アニメーションの長さ。

animation-timing-function :linear;

アニメーションの抑揚、スピード調整。
ease 初期値
ease-in
ease-out
ease-in-out
linear

animation-delay: 5s;

アニメーション開始の時間差。

animation-iteration-count:5;

アニメーションの回数。
数値
infinite 無限

animation-direction: alternate;

アニメーションの再生方向。
normal 初期値
alternate 再生→逆再生
reverse 逆再生
alternate-reverse alternateの逆再生

animation-play-state:paused;

アニメーションの再生、停止制御。
paused
running

animation-fill-mode:forwards;

アニメーションの再生位置。
none(初期値)
forwards 再生したらそのままキープ。
backwards とにかく最初から再生。
both とにかく最初から再生、再生したらそのままキープ。

animation: name 5s linear 1s infinite forwards;

全部まとめて指定。

公開 2019-07-31 22:32:43
更新 2022-01-31 01:46:04
このページの二次元コード
CSS3 アニメーション

人気のサンプル

search -  category -  about
© 2024 kipure
Top