こんにちは。

夏までには痩せるつもりの佐藤です。（毎年言ってる）

さてさて、前回までのHTMLのお勉強はちょっとお休み。

で、今回はCSSで動きをつけられる transition の使い方をご紹介します。

CSSってHTMLの装飾だけに使われてると思っている方、多いと思います。
確かにそうなんですけど、実はCSSもレベルアップしてまして
ちょっとした動きとかつけられるようになったんです！

「どうやってやるかわかんない」
「なんだか難しそう」

そんな気持ちになっている人も大丈夫。
以外と簡単です。

さっそく、見て行きましょう。

◆◆transitionプロパティ◆◆
まず、transition とはなんぞ?って思いますよね。
これはCSS3から新しく追加されたプロパティで
「時間的変化」を意味しているらしいです。
ちなみに我らの敵であるIEは10以上で動作します。

プロパティの中身はこんな感じ↓↓

①transition-property
transitionを適用するプロパティ。background-color などを指定します。
②transition-duration
どのくらいの時間で transition させるか。単位は s です。
③transition-timing-function
transition の変化の仕方を指定。
以下を指定することが可能です。
・default
・linear（一定のスピード）
・ease-in
・ease-out
・ease-in-out
・cubic-bezier() 4つの数字をカンマ区切りで指定

◆◆マウスホバーで画像をにょーんって拡大◆◆
さっそく、1つデモを作ってみます。

まずはHTMLで表示する枠とかを作りましょう。

あとはCSSを準備します。

できました！（うさぎちゃんにマウスをのせてみてください）

いかがでしたか？
全然簡単にできちゃいますよね。

CSSの新しいプロパティを使って、
かっこいいサイトどんどん作っていけたらいいなー。

それではまた。