CSS2まではほぼ脳内の辞書にすべて詰め込んで覚えた時期もあったのですが、 CSS3になってから複雑なプロパティが増えて断念したことを思い出します。

そもそもググれば済む話なのに無理矢理頭に詰め込んだのも相当バカなのでは（笑）

おかげでCSSの基本コーディングはめちゃくちゃ早くなりましたが、 ぶっちゃけ誰が書いても対して変わらないのでコピペでいいと思います。

今回からCSS初級講座として私がよく使っているテクニックというか、 これがないとWeb制作まともにできないだろうっていうのを紹介していきます。

CSSでアニメーションをするときはトランジションを使おう

Webサイトのアニメーションって基本はJavaScriptを使うのですが、 フェードイン・フェードアウト、スライドアニメーションなんかの 簡単なものに関しては最近というか結構前からCSSオンリーでアニメーションさせるのが基本になっています。

私は自然と使っているうちに覚えましたが、 慣れていないと何処にどう設定すればいいのか覚えにくいのかなと思います。

transitionは変化させる大本に設定する

今回例としてわかりやすく画像にマウスカーソルを乗せたら 画像がふわっと薄くなるような透明度をあげるやりかたを例に上げていきましょう。

マウスカーソルをなにかに乗せて動かすのは「:hover」というものを使います。

imgタグであればCSSで書くと

img:hover {
  /* 何らかの処理 */
}

こんな感じですね。

今回はimgタグにアニメーションを適用させたいので imgタグそのものに透明度である「opacity」プロパティを設定します。

img {
  opacity:1;
}

img:hover {
  /* 何らかの処理 */
}

opacityは0.0~1.0の範囲で透明度を調整できます。 1と0は小数点を省いても内部的に1.0や0.0として認識されてるので気にしなくて大丈夫です。

マウスカーソルを載せると透明度を上げる

次に先ほど準備した「img:hover」に「opacity:0.7;」を設定すれば 画像にマウスを乗せたら透明度が1.0から0.7に変化します。

img {
  opacity:1;
}

img:hover {
  opacity:0.7;
}

しかしこのままだと一瞬で0.7になってアニメーションができていないため、 transitionプロパティの出番というわけです。

imgタグにtransitionプロパティをつける

そして本題に戻ります。

アニメーションさせたい大本の設定のところにtransitionプロパティを設定します。

img {
  opacity:1;
  transition:opacity 0.3s ease;
}

img:hover {
  opacity:0.7;
}

これで画像にマウスカーソルを置くとふわっと薄くなるアニメーションが完成します。

簡単ですね！

transitionプロパティの簡単な説明

詳しくはCSSリファレンスを見てもらったほうが早いので、 ここでは今回使ったtransitionプロパティの簡単な説明をします。

簡単に書いちゃってますが、いろんな書き方ができるので混乱しやすいポイントかも知れませんが 今回の書き方がtransitionのメジャーな書き方だとおもうので覚えて帰ってください。

transitionプロパティの設定項目を１つずつ説明します。

１つ目の設定「opacity」

これはもうわかりますね。

transitionで変化をつけたいプロパティを指定してます。

今回はopacityをアニメーションさせたいので設定しているわけです。

２つ目の設定「0.3s」

今回はopacityを1.0から0.7に変化させています。

0.3sとはその「変化までにかかる時間」を設定しているというわけです。

sはsecondの略でおよそ0.3秒かけて変化させろという命令になります。

３つめの設定「ease」

ここは好みの問題になるのですが、どんな感じに変化させるかという設定箇所です。

よく使われるデフォルトの項目としては

の４つになります。

どんな動きをするかはCSSリファレンスを見てもらったほうが良いかなと思います。

元々用意されている以外にも自分で動きを作ることができるのですが、 自力で調整するのはかなり難しいのでなんかしらのジェネレーターを使ったほうがいいです。

基本はlinearかeaseを使っておけばいいかなと思います。

ここはもうちょっとこんな動きをしたいなっていうのがでてきたときに 自分の気にいる動きにチャレンジしてみてはどうでしょうか。

transitionはプロパティ別に設定しよう

今回transitionの１つ目の項目に設定した「opacity」

この部分はCSSプロパティ名を設定するのですが、 特別な設定方法として「all」というプロパティを設定できます。

その名の通りすべてのCSSプロパティを一括で設定できるという便利なものですが、 allを設定してしまうと設定したくない部分にもtransitionが適用されてしまいます。

透明度はアニメーションさせたいけど色の変化はアニメーションさせたくない。

ということが出てくるかも知れません。

すべて変化させると動作のパフォーマンスにも影響がでてしまうこともあるため 基本的には面倒臭がらずにプロパティ１つにつきtransition１つ設定していくことを心がけましょう。

複数transitionさせたい時の書き方

transitionは複数記載することができます。

以下のようにプロパティの設定１つにつきカンマ区切りで設定していけます。

img {
  opacity:1;
  transform:scale(1.0);
  transition:opacity 0.3s ease, transform 0.3s ease-in;
}

img:hover {
  opacity:0.7;
  transform:scale(1.2);
}

おそらく作っているうえで１つの項目に対してtransitionさせたいものって 大体多くても２～３つぐらいなのでそれぐらいなら１つ１つ記述して行くやり方がベストです。

個別に書くと動きも個別に設定が可能になります。

もし５つも６つもtransitionさせたい項目が１つのタグに詰まってたり、 動きが全く同じでいいという場合、その時は可読性の点を考えて「all」を使って１つにまとめて書いたほうがいいでしょう。

transitionプロパティを使うときの注意点

最後に使用時の注意点として２つお知らせしておきます。

ブラウザによって書き方が違う

CSS3以降はブラウザによって若干書き方が違ったりするものが多くなっています。 Web制作者殺しなのですが最近ではSassとかのプラグインの「autoprefix」というもので １つCSSを記述すればブラウザ別の書き方を出力してくれるので非常にに便利なため 現代のCSSを書くときは必ずSassとかのツールを利用して書くようにしましょう。

軽く説明すると、GoogleChromeやsafariなんかはwebkitなんて呼ばれておりまして、 CSSプロパティの頭に「-webkit-」という物を付けると認識したりします。

一方FirefoxなんかはMozillaという非営利法人の頭文字を使って「-moz-」という文字を CSSプロパティの頭につけて書いていくことになります。

私もSassとかを使っていない時代はブラウザ別に記述していました。

かなり大変だった記憶があるので、これから覚える人は必ずSassとかCSSをいい感じにやってくれるツールを使いましょう。

一応ブラウザ別にtransitionの書き方を記述しておきます。

img {
  -webkit-transition:opacity 0.3s ease;
  -moz-transition:opacity 0.3s ease;
  -o-transition:opacity 0.3s ease;
  -ms-transition:opacity 0.3s ease;
  transition:opacity 0.3s ease;
}

transitionだけで最低５つも書く必要があります。

上からChrome＆safari、firefox、Opera、IEって感じですね。

更に一番下に接頭になにもないtransitionを記述しておきます。

めちゃくちゃ面倒くさいでしょう？

仕事でこれらをすべて手書きしていては時間の無駄なので、 何度も言いますがSass等のCSSにコンパイルしてくれるツールを必ず使いましょう。

主要ブラウザ別に対応しないとプロとして恥ずかしいですし、 すべて自力で打ち込んだからといってお給料があがるどころか、 時給換算するとめちゃくちゃ低い時給で働くことになってしまいます。

主要ブラウザに対応するのはWeb制作者として仕事する上で基本中の基本なので、 Sass等のツールを使わない理由は一切なということですね。

書く側から言わせてもらえばブラウザごとに独自の書き方を作らず、 そろそろ１つの書き方に統一しろやって話でもあるんですけどね……

子要素をtransitionする場合

transitionは設定したクラスやタグそのものに影響します。

親タグのクラスだけにtransitionをつけた場合、 子タグには反映されないので注意しましょう。

子タグそのものにもtransitionプロパティと変化させたいプロパティを記述する必要があります。

親にカーソルが合わさった時に親の高さと子の高さを変化させるといったやり方の例を書きます。

.parent {
  height:100px;
  transition:height 1s ease;
}

.children {
  height:50px;
  transition:height 1s ease;
}

.parent:hover {
  height:200px;
}

.parent:hover .children {
  height:100px;
}

親にマウスカーソルを乗せると１秒かけて高さが変化します。

子にtransitionをつけていないと子は一瞬で高さ100pxに到達します。

ちなみにSass(scss)だと以下の様な感じに記述できます。

.parent {
  height:100px;
  transition:height 1s ease;

  .children {
    height:50px;
    transition:height 1s ease;
  }

  &:hover {
    height:200px;

    .children {
      height:100px;
    }
  }
}

今回はSassの記事ではないので詳しくは説明しませんが、 Sassを使わないと親子関係を書くときにめちゃくちゃ記述量が多くなってしまうので、 こうやって入れ子構造で書けるようになるのもSassの便利なところです。

これもツールを使わずCSS側で書けるようになってくれるのがベストなんですがね……

以上、transitionの基本的なお話でした。

Web制作をする人にとっては必須とも言えるtransitionプロパティ。

今回のようにマウスカーソルを乗せたら透明度を少し変化させたいだけ みたいな簡単なアニメーションであればCSSのみで実装できる力を身に付けておきましょう。