Let's Enjoy Single Life

from my delightful room

【CSSでアニメーション!】transformとtransitionでクルクル回るイメージをブログに取り入れよう

      2016/05/02

CSSでアニメーションが作れる!?

Sponsored Links

さわひで(@DelightfulRoom)です。

CSSを使ってダイナミックなアニメーション作りに挑戦してみませんか?

面白いですよ!それに目立つだけじゃなくて、本格的にCSSやhtmlの勉強をしてみようかな?と思うきっかけにもなります。

”ダイナミックなアニメーション” という言葉は少し抽象的ですよね。百聞は一見にしかずです!サンプルを用意しました。
下の ”渦巻き” のイメージにマウスカーソルを合わせてみて下さい。
(※ この記事で紹介する効果は、古いブラウザでは動作しなことがあります。)

”渦巻き” がグルグル回転しましたよ!
カーソルがイメージのエリアから外に出る時も逆の回転をします。

サンプルをもう1つ ”バレリーナのスピン” です。

スピンがぎこちないです。まだまだ修行中のバレリーナのようです。

2つのサンプルを見て ”やってみたい!” と思った方がいると思います。難しそうに見えますが、わりと簡単なんです。

それでは説明に入ります。まずは注意を読んで下さい。

今回の説明では、2番目に紹介したサンプル ”バレリーナのスピン” を再現することを目標として説明を進めて行きます。

CSSアニメーションの作り方

バレリーナのイメージがスピンするアニメーションを作成するためには、CSSのtrnsform属性とtransition属性の2つが必要です。

transform属性は、イメージを斜めに傾けたり3次元の回転をさせることができます。少し分かりにくいかもしれませんが、使って行くうちに分かって来ます。
細かい説明よりもそういう感覚が大切ですよね。

transition属性は、CSSの属性を時間的に変化させることができる属性です。時間と共にダイナミックに変化するアニメーションを作り出すのはtransitionです。

それでは ”バレリーナ” のCSSコードを見てみましょう。

結構ヘヴィーなコードが出てきました・・でも、よく見ると印象よりずっと簡単なことが分かります。
ボリュームのあるCSSコードですが、使っている属性は実はこの中のたった2つなんです。

もちろん、その2つ以外は必要ないということではありません。

align属性を使ってセンタリングしたかったのでイメージをdivタグに入れてあります。imgタグに ”.ballerina”(バレリーナ)というクラスを付けたので、タグセレクタは ”div .ballerina” という形になりました。

それでは、CSSコードの上のブロックを見て下さい。
-moz-” や ”-webkit-” ??見なれない表現もありますが、結局はtransitionの宣言です。

同じように下のブロックを見るとtransformの宣言だと分かります。

では何故、それぞれの宣言が4つずつ必要かというとその理由は ”ベンダープリフィックス” にあります。

 

● ベンダープリフィックスとは?

ベンダープリフィックスは、各ウェブブラウザが独自拡張した機能の違いをCSSの記述だけで取り払うことができる仕組みのことです。
つまりベンダープリフィックスは、ウェブブラウザを表していてブラウザの種類ごとに属性の指定ができるようになっています。

下のリストを見て下さい。

-moz- ・・・ Mozilla Firefox

-webkit- ・・・ Google Chrome&Apple Safariなど

-ms- ・・・ Microsoft Internet Explorer

-o- ・・・ Opera

各ブラウザとベンダープリフィックスの対応はこうなっています。

transformとtransition、2つの属性はベンダープリフィックスが必要な属性で付けないと表示されません。そう覚えて下さい。

transformとtransitionを使う時は、サンプルのコードのように4種類のベンダープリフィックスを付けたCSSの属性を4つ全て記述して下さい。
全部コピペして使いまわせば簡単ですよね。

 

● transform属性の使い方

transformの使い方の説明をします。transformに設定できるパラメータは種類がたくさんあります。
今回は、バレリーナのサンプルを再現することが目標なのでその説明だけにします。でも、これが分かれば他のパラメータを使うことなんて容易いことです。

transformの形を見ると

”-webkit-” はベンダープリフィックスです。transformの指定があり、その次にrotateY関数を使って回転する角度が指定してあります。

rotateY関数には、360°回転させたければ ”360deg” のようにdegキーワード(degreeの意味)を後ろに付けて数値で指定します。

rotateY関数の他にもrotateXrotateZなどの関数があります。(使って遊んでみて下さい。)

 

● transition属性の使い方

この属性はかなり厄介です。まずは形を見てみましょう。

ベンダープリフィックスの次にtransitionの指定があります。

transitionの1番最初のパラメータは ”-webkit-transform” となっています。ここでまたtransformが登場しました。

ここには ”時間的に変化させたいCSSの属性” を指定します。
今回はバレリーナをスピンさせたいので、transform属性をベンダープリフィックス付きで指定してあります。

2番目のパラメータの値は ”1s” です。これは1秒を表しています。
ここは ”変化が終わるまでにかかる時間” の設定です。例えばアニメーションを10秒で終わらせたければ10sと指定して下さい。

3番目のパラメータは ”変化の時間割” のコントロールです。
サンプルには ”linear” と入っていますが、他にどんなキーワードがあるか見てみましょう。

ease (開始と完了が滑らか)

linear (一定)

ease-in (ゆっくり始まる)

ease-out (ゆっくり終わる)

ease-in-out (ゆっくり始まってゆっくり終わる)

cubic-bezier(X,X,X,X) (Xは、数値で指定)

簡単な説明も入れてみました。

cubic-bezireに指定する数値は、0~1.0の小数で指定して下さい。
色んなキーワード使って動きの違いを見ると良いかもしれません。

4番目のパラメータは、アニメーションを開始するまでの ”遅延時間” の指定です。指定するとアニメーションの始動を遅らせることができます。
2番目のパラメータと同じで1sや10sという形で設定して下さい。

 

● 擬似タグと全体の説明

詳しい説明は省略しますが、”:hover” を擬似タグといいます。

今回のサンプルでは ”:hover” のあるブロックとないブロックの2つがあることが分かります。ない方にはtransitionの設定、ある方にはtransformの設定がありますよね。

”:hover” がないブロックは現在のスタイルそのもので、ここにtransitionの設定を書いて下さい。

”:hover” のあるブロックは、マウスカーソルが上に来た時に起こる変化の記述です。今回はバレリーナが360°スピンをするのでtransformが指定してありますよね。

まずはコピペでガンガン使って行きましょう!何回か使っていくうちに使い方が見えてきます。

全ての説明は終わりました。とても重要なことは、必ず4種類のベンダープリフィックスを持ったtransformとtransitionを記述することです!
これをしないとChromeでは動くのにFirefoxでは動かない・・ということにつながります。
(※ この記事で紹介する効果は、古いブラウザでは動作しなことがあります。)

アニメーションで遊んでみた!

それでは、transformとtransitionを使って遊んでみましょう!
まずはサンプルのバレリーナが、体操選手に転身してバク転を披露してくれました。

rotateYをrotateX関数に変えるだけこうなります。

次は文字の大きさを変えるアニメーションです。
下の文字にカーソルを合わせてみて下さい。

● 大きさが変るよ!

このサンプルのCSSコードはコチラです。

(※ スマホでは効果が出ないことがあります。)

font-sizeにはベンダープリフィックスが必要ないので、こういう形になります。

次は色を変化させてみましょう。
夜空に浮かぶ星が、白々と夜が明けるとともに見えなくなって行きます・・・

☆☆☆☆☆

このサンプルでは2つの属性を変化させています。下はそのCSSコードです。

(※ スマホでは効果が出ないことがあります。)

colorとbackground-colorにもベンダープリフィックスは不要です。ここから、ほとんどの属性にはベンダープリフィックスが要らないことが分かります。

transitionに属性を2つ以上指定する時は、このようにカンマで区切って指定して下さい。

まとめ

アイデア次第でビックリするようなトリックが作れるtransformとtransitionの組み合わせ。みなさんのブログで大活躍してくれたら嬉しいです。

それでは!

 - HTML・CSS | >

Sponsored Links1

Sponsored Links

Sponsored Links1

Sponsored Links

さわひで


執筆者のさわひでです。
1000000PVを目指して始めたブログですが・・・
今のところその気配は全くありません。
ヘンなブログですが、楽しい記事でいっぱいです♪

この記事で笑った方は是非、SNSの「いいね!」を下さい!

  • このエントリーをはてなブックマークに追加
  • Pocket

  絶対面白い!関連記事はいかがですか?

黒板消し
WordPress『STINGER5』で「カテゴリ・タグ、検索結果一覧ページ」の見出しを表示させない方法

Prologue 『STINGER5』でカテゴリやタグの一覧ページを開くと表示さ …

ガラスの玉_影
【プレミアム・イメージの作り方】box-shadowでブログのイメージを立体的に見せよう【影がつくよ!】

box-shadowを使ってブログをアートに! みなさんはCSSのbox-sha …

つないだ手
【ShareHtml】カッコ良いリンクをブログの記事に貼ろう!【プラグインは不使用です】

テキストだけのリンクを卒業しよう ブログに貼り付けるリンクはカッコ良くキメたいで …

カラフルな数字
【ブログの彩はこれでバッチリ!】身に付けたい『ウェブフォント』をWordPressで使う方法

ウェブフォントでもっとブログが楽しくなる! こんにちは!さわひで(@Deligh …

question
【お手軽!】WordPressテーマ『STINGER5』でイメージを横に並べる方法【※positionは一切不使用です】

STINGER5ってイメージが横に並ばない・・・ さわひで(@Delightfu …

リラッくまのストラップ
【ブログの完成度を上げよう!】WordPressのブログに『ファビコン』を導入する方法

もう1つのブログの顔、ファビコンを付けてみよう! さわひで(@Delightfu …

積み木
【Genericons】クールに記事をデコれる『アイコンフォント』を使ってみよう!【WordPress-STINGER5】

アイコンフォントなら記事を書くのが楽しくなる♪ さわひで(@Delightful …