定番
履歴

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; 全部まとめて指定。
2016-02-05 20:26:10
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top