概要
状態:確認中
閲覧数:1,935
投稿日:2015-01-17
更新日:2016-03-25
┏transitionプロパティ
┃・簡単なアニメーション
┃
┗animation-nameプロパティ、animationプロパティ
・本格的なアニメーション
・CSS Animations Level 1
一覧
確認中
・キーフレームアニメーション名を複数指定
・異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用
┃・簡単なアニメーション
┃
┗animation-nameプロパティ、animationプロパティ
・本格的なアニメーション
・CSS Animations Level 1
一覧
- | transitionプロパティ | animationプロパティ |
---|---|---|
概要 | 簡単なアニメーション | 本格的なアニメーション |
詳細 | 始点終点の2点間のアニメーション機能を提供するモジュール | アニメーション中のキーフレームと呼ばれる任意の点ごとにCSSのプロパティ値を指定することで、transitionプロパティでは行えない複雑なアニメーションを実現 |
ループ | 不可 | 可能 |
アニメーション対象 | 特定プロパティ名 | キーフレーム定義 |
アニメーション間隔 | 始点終点の2点間 | キーフレームと呼ばれる任意の点ごと |
・キーフレームアニメーション名を複数指定
・異なる角度の「transform:rotate」を連続実施するためには、@keyframes を利用
transitionプロパティ
animationプロパティ
本格的なアニメーション
ルール
・複数キーフレーム(アニメーション途中のポイント)を定義可能
・特定 CSS プロパティについて、その各ポイントにおける固定値を指定
・キーフレーム内で、各種のプロパティに使う値を自由に設定可能
・アニメーション開始と終了を設定する値には、from キーワードと to キーワード以外にも、0% と 100% を使用可能
キーフレーム
・@keyframesというキーワードで囲って定義
・@keyframesキーワードの後ろにはanimation-nameプロパティから参照されるキーフレーム定義の名前(任意)を指定