July 2016
Intermediate to advanced
384 pages
10h 11m
Japanese
Content preview from CSSシークレット ―47のテクニックでCSSを自在に操る
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
知っておくべきポイント
基本的なCSSアニメーション、 P.324の「弾むような動きのトランジ
ション」
課題
CSSのプロパティに対してトランジションを適用し、値を徐々に変化さ
せるだけでは不可能なアニメーションもあります。例えば、パラパラ漫画
や複雑なプログレスインジケーターなどがあげられます。このような場
合、フレーム（コマ）ごとに画像を用意してアニメーションを実行するこ
とが最適ですが、 Web 上でこれを柔軟な形で実現するのはとても困難
です。
「アニメーション GIF を使えばよいのではないか」と思われた読者もい
ることでしょう。確かに、多くの場合ではアニメーション GIFでも十分で
す。しかし以下のケースでは、アニメーションGIF は致命的な欠点を抱え
ています。
コマ送りの
アニメーション
43
一般的には、すべてのフレームを通じて合計 256 色までしか利用できま
せん。
アルファ透明度を指定できません。背景の色を特定できない場合、この制
約は大きな問題になります。例えば図 8.13 のようなプログレスインジ
ケーターはよく見られます。
336
8章：トランジションとアニメーション
図8.13
dabblet.comで使われている半透明
のプログレスインジケーター。 ア ニ
メーションGIFでは実現できない
■
■
1 つ目と 2 つ目の問題については、 2004 年という大昔から Mozilla が解
決に取り組んでいます。コマ送りのアニメーションを、 PNG データ と し
て保存できるようになりました
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.