[CSS] animationを使ってみる!
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
色の変化をCSSのみで実装できる!
CSS3のキーフレームアニメーションでは、JSで出来る、背景色が徐々に変わるようなことができちゃいます。
また、要素を動かす事もできます。
設定内容がややこしいので、しっかり覚えましょう。
まずは基本のanimationから!
animationプロパティの設定で、基本的な事を決めていきます。
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
animationプロパティでは、上記の順番で記述する事が推奨されています。
もちろん、省略可能ですが、一番最初のanimation-nameだけは必須項目です。
これがないとキーフレームの情報を受け取れません。
記述例
div#bg_anima { animation: anima01 10s ease 3s infinite forwards; }
このような感じですね。
分けがわからなくなる人は、一つずつ順番に書いていってもいいかもしれません。
各プロパティを一つずつ見ていきましょう。
animation-name
このプロパティは、要素にキーフレームを適用する場合に指定する必要があります。
@keyframeで定義した名前と一致しないと何もおきません。
animation-duration
このプロパティは、一回のアニメーションの長さを指定します。
例えば、10秒であれば、10sです。0を指定すると何も実行されません。
animation-timing-function
このプロパティは、要素にアニメーションを適用する際に、アニメーションのタイミングや進行割合を指定します。
プロパティの値には、キーワードもしくは3次ベジェ関数で指定することができます。
linearcubic-bezier————–(0.0, 0.0, 1.0, 1.0) を指定したのと同じ(一定)
ease-incubic-bezier————(0.42, 0, 1.0, 1.0) を指定したのと同じ(ゆっくり始まる)
ease-outcubic-bezier———-(0, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり終わる)
ease-in-outcubic-bezier——-(0.42, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり始まってゆっくり終わる)
cubic-bezier———————-(数値, 数値, 数値, 数値)3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
上記6つの指定方法がありますが、上5つはあらかじめ設定されているので、キーワードだけでいいのです。
それぞれ試してみて、どうしても動きに納得がいかない場合、一番したのcubic-bezierを使用します。
animation-delay
このプロパティは、アニメーションの開始のタイミングを指定します。
初期値は0で、読み込み後すぐに実行されます。
設定する値は、durationと同様に10sとか5sとか秒数を指定します。
animation-iteration-count
このプロパティは、アニメーションの繰り返し回数を指定します。
初期値は1で、一回再生されると止まります。
また、数値ではなくinfiniteを指定すると無限ループで再生されます。
animation-direction
このプロパティは、アニメーションを交互に反転再生させるかどうかを指定します。
値は、normalとreverseとalternateがあり、reverseは、逆再生されます。
alternateは、普通に再生されたあと反転再生され、また普通に再生されるというように交互に反転します。
もうひとつ、reverse-alternateもあり、alternateの逆です。
animation-play-state
このプロパティは、アニメーションの一時停止を指定します。
が、多分使いどころがないですね。
animation-fill-mode
このプロパティは、アニメーションの再生前後の状態を指定します。
forwards————再生後、アニメーションの最後に適用されたキーフレームを保持
backwards———-再生前、アニメーションの最初のキーフレームを保持
both——————-forwards と backwards の両方を適用
とりあえず、やってみよう!
まずは、キーフレームを設定します。
@-webkit-keyframes move { from { left: 0; } to { left: 100%; } } @keyframes move { from { left: 0; } to { left: 100%; } }
※moveの部分は任意の文字列で。
webkit系ブラウザ用にベンダープレフィックスを設定します。
そして、animationを設定していきます。
.sample01 { -webkit-animation: move 0.5s ease; animation: move 0.5s ease ; } .sample02 { -webkit-animation: move 1s ease; animation: move 1s ease; } .sample03 { -webkit-animation: move 1.5s ease; animation: move 1.5s ease; } .sample04 { -webkit-animation: move 2s ease ; animation: move 2s ease; }
今回は、左から右に動く文字を作ってみました。
設定項目が少ないです・・・。
まとめ
現在は、まだまだ使えることは少ないと思いますが、これからどんどん増えていくでしょう。
そんな時に、わからないままだと、取り残されてしまいます。
早めにマスターして、どんな状況でも使えるようになりたいですね!
ad
関連記事
-
-
[jQuery] クリックしたところから波紋が広がるプラグイン!
Rippler 以前にも波紋のプラグインを紹介しましたが、今回も新たなプラグインを紹介しま
-
-
[jQuery] 360°回転させたり、マウスでシーンを移動するプラグイン
rollerblade-js Rollerbladeを使えば、Webサイトに360°回転させてプロ
-
-
[jQuery] OSX風のスクロールバーにするプラグイン!
trackpad-scroll-emulator trackpad-scroll-emulator
-
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
-
[Dreamweaver] テンプレート機能を使う!初級〜中級編
まだまだある便利機能! 既に、上級編まで紹介してしまってますが、抜けていたので、すこし簡単です。
-
-
[CSS] CSSで作るリストのアイコン
CSSだけでも色々出来る! CSS3が現在の最新ブラウザでは大体対応されてきてますので、色々な表現
-
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[Dreamweaver] 不要な_notesを作成させない方法
みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると
-
-
[jQuery] フォーカスポイントを決めて、そこを中心に切り抜くプラグインFocusPoint
FocusPoint FocusPointは、レスポンシブにクロップ(切り抜き)するjQueryの