BLOG

2014年11月10日/ css, アニメーション,

CSS3を使った簡単なアニメーション作成方法その1(transitionを使う)

こんにちわ、最近夜な夜なミニ四駆をいじっている宮本です。

クランチタイマーブログでミニ四駆記事を書いて以降、社員全員が見事にはまってしまい、今でも続けております。

そのうち自分たちでレース大会も開催する予定ですのでお楽しみに!

 

▼ミニ四駆に関する記事
1週間で日本一!?ミニ四駆ジャパンカップに挑戦してみた
ついに決着!ミニ四駆ジャパンカップ2014広島大会結果報告!

 

▼ミニ四駆サークル(Facebookページ)
ミニ四駆大会情報などを発信していきますので、是非「いいね」を押してください!
広島ミニ四駆サークル

 

さて、ミニ四駆と同じくらい大好きなのがインターネットで、毎日いろんなWEBサイト動画を見ています。

かっこいいサイトや動画を見つけては、これどうやって作ってるんだろうとすぐ調べます。

最近はちょっとしたアニメーションを取り入れたサイトが増えてきていますよね。

 

一昔前は、FLASHを用いたアニメーションサイトが流行っておりましたが、iPhoneiPadの普及、Macを使用するユーザーが増えてきたことから、今現在ではFLASHを使うケースが減ってきました。
※iOSなどではFLASHは動かないため。

その代わりとなるのがjavascriptcss3を使ったアニメーションで、FLASHに負けないくらいのものも作成できます。

 

そこでcssを使って簡単なアニメーションを作る方法をお伝えしますが、その方法が2つ(transition animation )ありますので、そのうち今回はtransitionを使ったアニメーション作成方法について紹介します。

サイト内でちょっとした動きをつけたい場合などに参考にしてみてください。

※ただし、transitionはIE10からの対応となります。

cssのtransitionを使ってアニメーションを作る

transitionはaタグなどの「:hover」のように、あるアクションに対し要素を変化(移動や拡大、色を変えるなど)させるものです。

まずは下の赤い四角の上にマウスカーソルを当ててみてください。

 

 

どうでしょう。赤い四角が右に動きながら大きくなり、更に色まで変わりますよね。

これは下記ソースで実装されています。

■css

 

「.aka」でアニメーション前の赤い四角を作っており、「.aka:hover」でアニメーション後の緑の大きな四角を設定しておりますが、「.aka」中に「transition: all 500ms linear 0s;」とありますよね。

ここでアニメーションを指定しているわけです。

 

ではその説明をします。

transitionには下記のようなプロパティを設定することができます。(上記例ではプロパティ毎にコードを書かず、一つにまとめております。)

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

一つずつ見ていきましょう。

transition-property

transition-propertyは、どのプロパティに対してアニメーションを実行するかを決めるものです。

下の二つの赤い四角それぞれにマウスカーソルをあててみてください。

 
・すぐに色が変わる

 
・ゆっくりと色が変わる

 

上の四角と下の四角、同じように大きくなって色が変わるということは変わりませんが、色が変わるタイミングが違うことに気づきますでしょうか。

上の四角はマウスをあてた瞬間に色が緑になり、離した瞬間赤に戻ります。

一方下の四角は時間をかけて色が変わっているかと思います。

つまり下のほうだけ背景色の変化にもアニメーションをつけているいるのです。

下記ソースを見てください。

■css

 

「.aka2」が上、「.aka3」が下の四角になりますが、違いは「transition-property:」のところに「background-color」があるかないかです。

アニメーションは「transition-property:」に書いたプロパティだけが適応されるので、上記の通り色が変わるところだけに差が出てきます。

尚、「transition-property:all」とすることで、変化できるプロパティ全てがアニメーションの対象となります。

 

transition-duration

transition-durationはアニメーションにかける時間です。

 
・変化するまで0.5秒

 
・変化するまで2秒

 

下記がソースとなります。

■css

 

上の四角(.aka4)は0.5秒、下の四角(.aka5)は2秒かけてアニメーションしています。

 

transition-timing-function

transition-timing-functionはアニメーションのパターンを定義します。

例えば、同じ1秒かけてアニメーションをさせるとしても、始めは速く、最後は遅くといった変化や、常に一定、始めはゆっくり、最後は遅くといったように設定することができます。

次の例では、上の四角は速く入り、ゆっくり終わる、下の四角はゆっくり入り、加速し、ゆっくり終わるといったようになっております。

 
・速く入り、ゆっくり終わる

 
・ゆっくり入り、加速し、ゆっくり終わる

 

下記がソースとなります。

■css

 

「ease-out」は速く入り、ゆっくり終わる、「ease-in-out」はゆっくり入り、加速し、ゆっくり終わるという設定になります。

その他にもいくつか設定があり、また自身で数値を設定しタイミングを決めることもできます。

詳しくは下記URLなどをご覧ください。
transition-timing-function-CSS3リファレンス

transition-delay

transition-delayはアニメーションの開始時間までを設定します。

下の例では、上の四角はマウスを当てるとすぐにアニメーションが開始しますが、下の四角はマウスを当てて1秒後にアニメーションが開始されます。

 
・マウスを当てるとすぐにアニメーションが開始

 
・マウスを当て1秒後にアニメーションが開始

 

下記がソースとなります。

■css

 

まとめ

いかがでしたでしょうか。

アニメーションをちょっと取り入れるだけで、サイトの印象というのは大分変わってきます。

資料請求など、コンバージョンに繋がるボタンなどは目立つように作る必要がありますが、そこにも使用できるかと思います。

是非お試しください!!

次回はもう一つの方法「animation」を使ったアニメーションの作り方を紹介します!

Resent Posts

Category