読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

CSSアニメーションをどうやって始めるか - How to Get Started with CSS animations-

 Macが無い日々にこれまで先延ばしにしていた色々なインプット事項をある程度済ませることができた。CSS3のanimationについてもそうで、今回はそのことについて書かれた本の紹介をします(タイトルに対する答えを知りたい方は最終段落だけ読んでください)。
 まず、述べておきたいのは、CSSアニメーションに関する専門書籍というのは日本語でまだ無い、ということです。なので、洋書をあたるしかありません。洋書では既に4、5冊出ているのですが、今回は最初に以下の書籍を選びました。

A Pocket Guide to CSS Animations (English Edition)

A Pocket Guide to CSS Animations (English Edition)

 この表紙を見て、「あ、そのレーベルね」とご存知の方もいるでしょう。そこそこ有名な電子書籍レーベルなのですが、特徴はページ数が短く値段が安いことです。入門書はエッセンスが詰まった薄い本に限りますから、とっかかりとして最適なレーベルなわけです。私はこれまでに、カラーアクセシビリーとスタイルガイドに関するものを既に読んでいます。なので、レーベル自体の信頼感もあったため第一冊にこれを選んだというわけです。

 そもそも、私が何を一番期待してアニメーションについて知ろうと思ったのかと言うと、それはハンバーガーアイコンのバーが動いてそれが罰印や矢印になるメカニズムを知りたかったからです。もう少し抽象的に言えば、animate.cssのようなライブラリを含めた、ミクロな部分でのCSSアニメーションについて知りたかったからです。例えばそれは、以下のチュートリアルにあるようなアニメーションのことです。


ASCII.jp:差がつくメニューアイコン 25個のCSSアニメーション (1/2)|先端サイトに学ぶCSS3/jQueryアニメーションデザイン

 いざ作ろうとした場合、上のページのコピペで済ませることもできるのですが、CSS3のアニメーションについての基本的な理解がないと応用が利かないだろうということで、ちゃんと基礎から学ぶことにしたのです。
 で、上に掲げた書籍はお前のアニメーションの理解を助けたのか?という問いについては、半分だけイエス、と言えます。
 なぜか。今回初めてしったのですが、「CSSにおけるアニメーションは、必ずしもanimationプロパティのことを意味しない」んです。すでに理解していらっしゃる方は何の疑問も感じないでしょうが、まだアニメーションについて知らない方は意味がわからないと思います。
 CSSプロパティのanimationというのは、以下のドキュメントにあるようなものです。background-colorがあるように、animationというものがあります。

animation - CSS | MDN
 しかし、「CSSにおけるアニメーション」というのは、このanimationプロパティによってだけ実装可能なものではないのです。もう一つ、CSSでアニメーションを実現するためのプロパティがあります。それが、transitionです。ちなみに、SVGでもそうなのですが、transition、transform、translateなどを混同しないように注意してください。

transition - CSS | MDN
 すると、ここでこういう疑問が出てきますね。
じゃあ、animationとtransitionって何が違うのか。
 これに関しては、大まかに述べれば、「最初と終わりの状態だけを指定するようなシンプルなアニメーションなら、transitionで十分対応できる。一方で、最初と終わりの状態のあいだでも細かな、より複雑なアニメーションを定義したいなら、animationを使う」という説明で大丈夫だと思います。

 ここで再び、冒頭に掲げた書籍の話題に戻ると、この書籍の「CSS Animations」というのは、CSSプロパティとしてのanimationのことを指していました。なので、keyframesやanimation関連のプロパティについては詳しいですが、transitionを含む「CSSアニメーション全般」については扱っていません。このため、「半分だけイエス」としました。言い換えれば、文字通りanimationプロパティについてだけ理解を深めたい人には満足する内容になっています。

 さて。ではどうすれば入門できるのでしょうか。「CSSアニメーションは、animationプロパティの占有物でなく、transitionとanimationプロパティの使い分けによってできている」ということがわかれば、あとは上に貼ったMDNのドキュメントを読んだり、ネット上でチュートリアルを拾って真似ればできてしまうはずです。もちろん、比較的シンプルなtransitionから着手することをお勧めします。とはいえ、何かしらの本によって導かれたいという人もいると思います。その人には、次の書籍をお勧めします。

 こちらを入手すれば、最初に掲げた書籍は必要ないです。値段は3倍しますが、それでもKindleで1000円以下です。ページ数的には、最初に掲げた書籍の、感覚として、6、7倍くらいはあります。この本のいいところは、といっても未だ私自身4分の1くらいしか読んでいないのですが、animationだけでなく、transition、さらにjQueryと併せたアニメーションの実現についても解説してくれているところです。「animationとtransitionをどう使い分けるか」という疑問点にも、項を割いて詳細に説明してくれています。
 
 これ以上長くならないようにまとめてしまうと、「まず、CSSのアニメーションがanimationだけのものでないことを理解して、transitionプロパティからインプットと実践を始める。animationについては、transitionの発展形と見て、keyframesなどのanimation特有のトピックについても学ぶ。animationとtransitionについて理解をしたならば、ネット上に転がっているチュートリアルや実例に当たる。先人に導かれたい場合は、『Animation in HTML, CSS, and JavaScript 』を買って読むのが良い」となります。