この記事は「今年お世話になったCSS Advent Calendar 2016」の2日目の記事です。
この記事を書くにあたって今年お世話になったCSSのことを一生懸命考えて、clearfixかoverflow辺りかなぁ、と思ったものの、もうflex-boxあるし、かといって下手に掘り下げると思わぬ地雷をぶち抜きそう。
なので一番わかりやすい**The CSS3、「animation」**のことを書きます。
お世話になったCSS「animation」
本当はbox-shadowやborder-radiusやbackground-size: coverにもめちゃくちゃお世話になっているのですが、それほど掘り下げる点がなく「めっちゃいいですよね！」の一言で記事が終わってしまいます。
その点、animationやtransformはいかにも新しくてわかりやすいです。
基本的な使い方はいまさらなので割愛しますが、ざっくりと紹介だけすると、いままでjs等でしか実現できなかったアニメーションがCSSだけで実装できます。
「animation」で実現する近未来の流れるテキスト
animationがいかに便利かデモを作ってみました。
marquee!!
「CSS3でmarqueeを」という試み自体はあるものの、反復するものが見つからなかったので作ってみました。
「animation」で実現する風に揺らぐ灯火のようなテキスト
animation は何も要素を動かすだけのプロパティではありません。
タイムライン的にCSSを制御できるため、あらゆるプロパティを操作できます。
下記は上記の流れるテキストにもう一手間加えたデモです。
blink!!
CSS3と共に、今まさに未来がやってきた。そんな感じがしますね。
以上です。
おまけ
下記はGoogle Chromeが提供している実際にブラウザで表示されたCSSプロパティの統計データ。
ここ24時間くらいにもっともみんながお世話になったCSSプロパティはdisplayだそうです。
