CSS3「animation」で実装する近marqueeとblinkのアニメーション

Published:2016.12.02Last updated:2017.01.11

この記事は「今年お世話になったCSS Advent Calendar 2016」の2日目の記事です。

この記事を書くにあたって今年お世話になったCSSのことを一生懸命考えて、clearfixoverflow辺りかなぁ、と思ったものの、もうflex-boxあるし、かといって下手に掘り下げると思わぬ地雷をぶち抜きそう。
なので一番わかりやすいThe CSS3、「animation」のことを書きます。

お世話になったCSS「animation」

本当はbox-shadowborder-radiusbackground-size: coverにもめちゃくちゃお世話になっているのですが、それほど掘り下げる点がなく「めっちゃいいですよね!」の一言で記事が終わってしまいます。
その点、animationtransformはいかにも新しくてわかりやすいです。

基本的な使い方はいまさらなので割愛しますが、ざっくりと紹介だけすると、いままでjs等でしか実現できなかったアニメーションがCSSだけで実装できます。

「animation」で実現する近未来の流れるテキスト

animationがいかに便利かデモを作ってみました。

marquee!!

「CSS3でmarqueeを」という試み自体はあるものの、反復するものが見つからなかったので作ってみました。

「animation」で実現する風に揺らぐ灯火のようなテキスト

animation は何も要素を動かすだけのプロパティではありません。
タイムライン的にCSSを制御できるため、あらゆるプロパティを操作できます。
下記は上記の流れるテキストにもう一手間加えたデモです。

blink!!

CSS3と共に、今まさに未来がやってきた。そんな感じがしますね。

以上です。

おまけ

下記はGoogle Chromeが提供している実際にブラウザで表示されたCSSプロパティの統計データ。
ここ24時間くらいにもっともみんながお世話になったCSSプロパティはdisplayだそうです。

最新の記事

お知らせ