試用版ダウンロード

Pocket

「CSS3アニメーション&トランジション」 試用版

試用版で本書の内容を確認してください。

試用版には次のCSS3アニメーションとCSS3トランジションが含まれています。

画像をクリックしてください。サンプルアニメーションとサンプルトランジションが実際にブラウザ上で動くところを見ることができます。

●旋回するトンボ
WhirledAnime

●熱帯魚のキッス
KissingFishesAnime

●宇宙旅行へ出発
SpaceTripAnime

●景色を動かす(~車窓から~)
ViewFlowAnime

●ピエロの玉乗り
PierrotOnBall

●グラデーションが変化するボタン
NaviButton05B

●グラデーションが回転するボタン
NaviButton05D

●プラスチック風のボタン
NaviButton06C

●リニアグラデーション(線形グラデーション)
LinearGradation

【 前書き 】~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~


最近はスマホやタブレットが普及してきて、アプリやホームページがきれいでカラフルなものが多くなってきています。
もしあなたが自分のブログやホームページを持っていたら、やはり注目されるようなブログやホームページにしたいでしょう。それにはアニメーションを使うのが効果的です。

アニメーションというとFlashやSilverLightが思い浮かぶと思います。しかしFlashやSilverLightはブラウザには重すぎ、いろいろな制約もあるので不人気で、もはや過去の技術になりつつあります。今後普及してくるのがHTML5とCSS3を使ったトランジションとアニメーションです。HTML5とはHTML version 5(HTML改訂第5版)という意味で、CSS3とはCascading Style Sheet version 3 の略語で、カスケーディング スタイルシート 第3版という意味です。 HTML5とCSS3を使ったトランジションやアニメーションを利用すると、面白い個性的なブログやホームページにすることができます。

HTML5、CSS3トランジション、CSS3アニメーションはW3C(World Wide Web Consortium:Web技術標準化団体)が作っている世界標準の仕様です。
世界標準仕様のCSS3トランジションとCSS3アニメーションの描画エンジンをGoogle Chrome、Firefox、Microsoft Edge、Internet Explorer、Safariなどのブラウザが実装済みです。あとはHTMLとCSSを書いてやるだけです。
JavaScriptやその他のプログラミング言語を使用せずに、HTMLとCSSの簡単な記述だけでアニメーションを動かすことができます。この本で紹介しているようにかなり繊細で高度なアニメーションを作ることができるので、私自身もCSS3トランジションとCSS3アニメーションの可能性に驚いています。
また例えばグラデーションをホームページの中に背景色として表示させるためには、今まではIllustratorやPhotoshopといったソフトを使ってグラデーションの画像を作っていましたが、CSS3で指定すればブラウザが自分で描いてくれるのです。メニューバーやボタンなどもCSS3でカラフルに作れるようになりました。

現在CSS3アニメーション(およびトランジション)の作成ソフトは、Adobe社のEdge Animate、Sencha社のSencha Animator、Google社のGoogle Web Designerなどがありますが、そのようなソフトは必要ありません。ブログやホームページを作る時に使うHTMLとCSSが書けるエディタソフト(無料のエディタソフトで可)があれば簡単にCSS3アニメーション(およびトランジション)が作れます。
またEdge Animate、Sencha Animator、Google Web DesignerがあればCSS3アニメーション(およびトランジション)がすぐに簡単に作れるという訳でもありません。これらのソフトを使う際にはCSS3トランジションとCSS3アニメーションの仕様を理解していないと使えないのです。
本書籍はCSS3トランジションとCSS3アニメーションの仕様を分かり易く説明しています。また、仕様が分かっただけではトランジションやアニメーションは作れないので、使い方の基礎から応用までを詳細に解説しています。テクニックや注意点などの詳細な説明とサンプルがたくさん入っています。
Edge Animate、Sencha Animator、Google Web Designerなどを使いたいと考えている方も、CSS3トランジションとCSS3アニメーションの基礎知識として本書を利用していただけると思います。

サンプルのHTMLとCSSはそのまま使って頂いてもよいですし、改良して使って頂いてもかまいません。自由に使用して頂いてかまいませんが、使用したことによってシステムやプログラムなどに対する不都合やトラブルが発生しても、当方は一切関知しません。自らの責任で使用してください。

このような本はまだ誰も書いていないので、試行錯誤しながら”(-“”-)”その結果を解説しています。これほど詳細にCSS3トランジションとCSS3アニメーションについて解説した本は世界中探してもないと思います。世界で初めての本だと自負しています。

CSS3アニメーションとCSS3トランジションは難しいものではありません。本書の中にはベクトルや行列、三角関数、物理法則などが出てきますが、高校で習ったことを思い出していただければ事足りる程度の内容です。またCSS3アニメーションとCSS3トランジションの仕様で、数式などを使うのはほんの一部分だけです(しかもあまり使われないと思われるmatrix関数の仕様ぐらいのものです)。私もこの本を書くにあたって、関係する数学や物理を初めて真剣に調べてみて、決して難しいものではないことが分かりました。私は文系の人間です。私でも理解できたのですから大丈夫です。私は断言できます、CSS3アニメーションとCSS3トランジションは決して難しいものではないと。HTMLとCSSの知識だけあれば大丈夫です。またHTMLとCSSの知識はだれでも簡単に身に付けることができます。あなたもCSS3アニメーションやCSS3トランジションを作ってみませんか。

先ほども書いたように、前例がない中で試行錯誤しながら書いたので、仕様の理解不足や誤った記述があるかもしれません。もしあなたが気づいたら連絡して頂けますと感謝致します。

2016年5月16日
電脳Papa

【 本書の構成について 】~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~・~


本書はCSS3トランジションとCSS3アニメーションを自由に使いこなせるようになって頂くことを目的に書かれており、次のような2部構成になっています。
    ・第1部「Transitionを使いこなす編」
    ・第2部「Animationを使いこなす編」

第1部「Transitionを使いこなす編」では、CSS3トランジションの仕様とその使い方、およびトランジションとアニメーションに使えるプロパティについて詳しく解説しています。トランジションを使いこなせるようになることを目的にしていて、トランジションのサンプルをたくさん掲載しています。
CSSトランジションとCSSアニメーションに関連するW3C(World Wide Web Consortium:Web技術標準化団体)が作っている仕様、およびCSSトランジションとCSSアニメーションで使えるCSSプロパティについての解説は第1部「Transitionを使いこなす編」で分かり易く解説しているので、第1部は必ず目を通してください。

第2部「Animationを使いこなす編」では「Transitionを使いこなす編」で理解した技術をベースにして、さらにCSSアニメーションの仕様とその使い方を理解することで、アニメーションを使いこなせるようになることを目的にしています。おもしろいアニメーションのサンプルもたくさん掲載しています。

なお、本書はHTML5とCSS3トランジション、CSS3アニメーションおよびその他のCSSプロパティだけでトランジションとアニメーションを作成することを目的にしており、JavaScriptやJQueryなどは使用していません。
今後はVideo、Audio、JavaScript、JQueryなどと組み合わせて、さらにCSS3トランジションとCSS3アニメーションを自由自在に使いこなせるように、つぎのような内容での発行を予定しています。
    ・第3部「CSS3プラスVideo、Audio編」
    ・第4部「CSS3プラスJavaScript、JQuery編」
    ・第5部「CSS3プラスCanvas、SVG編」

【 目次 第1部「Transitionを使いこなす編」 】~・~・~・~・~・~・~・~・~・~・~・~・~・~

※赤字の項目を「CSS3アニメーション&トランジション」 試用版でお試しいただけます。

1100 CSS3で作れるトランジションとアニメーション
1110 CSS3トランジションとアニメーションの基本事項
1111 基本のボックス(margin, width, height, border, background)
1112 変化のトリガー(変化させるきっかけ)の方法
1113 ボックスを変化させる(text-align, line-height, color, font)
1114 画像を変化させる
1115 トランジションとアニメーションにできる要素とプロパティ
1116 位置の記述方法について(position, top, right, bottom, left)
1117 親子のボックス(親子要素)
1118 親子要素のトリガーの範囲
1200 時間をかけて変化するトランジション
1210-1 Transitionの指定項目(transition)
1210-2 Transition-property
1210-3 Transition-duration
1210-4 Transition-timing-function
1210-5 Transition-delay
1210-6 Transitionショートハンド
1220 hoverトリガーの最適な方法
1221 トリガーをわかり易くする方法(cursor, border-radius)
1222 Transform プロパティ(transform 2D,3D)
1223 Transformプロパティの2D関数(rotate, scale, translate, skew)
1224 XYZの組み合わせでトランジション
1225-1 練習1 Kissing Fishes
1225-2 練習2 Pierrot(clown) on Ball(rotateZ, rotate)
1225-3 練習3 Curving Ball(easingの組合せ)
1225-4 練習4 Circling Shuttle(transform-origin)
1225-5 練習5 Spiral DragonFly
1225-6 練習6 Overflow The Stage(overflow)
1225-7 練習7 Expanding Moon(scaleX, scaleY, scale)
1225-8 練習8 Translate Balls(translateX, translateY, translate)
1225-9 練習9 Skew Wheel(skewX, skewY, skew)
1226 大きさ0のボックス
1227 Textの2Dトランジション (text-shadow, white-sp, letter-sp, word-sp)
1228 Transformプロパティの3D関数(rotateX, rotateY, translateZ, translate3d)
1229 Textの3Dトランジション (rotateX, rotateY)
1230 Perspectiveで遠近法 (perspective)
1231 Transformプロパティの関数の指定順
1232 セレクタを使う (selector)
1233 親子要素の組合せで変化をつける
1234 Nth-Child セレクタ (nth-child, nth-of-type)
1235 色の変更 (RRGGBB, rgba, opacity)
1236 ボックスの背景の変形移動 (background-)
1237-1 線形グラデーション Linear Gradation (linear-gradient)
1237-2 線形グラデーションのトランジション
1238-1 円形グラデーション Radial Gradation (radial-gradient)
1238-2 円形グラデーションのトランジション
1239 2Dか3Dか? Transform Style (transform-style)
1240 3Dキューブ(Cube)を作る (translateZ)
1241 裏側を使う Backface Visibility (backface-visibility)
1242 Matrix2D 関数 (matrix)
1243-1 2Dフォトギャラリー1 (z-index, box-shadow)
1243-2 2Dフォトギャラリー2
1244 Matrix2Dの合成 Multiply Matrix2D
1245 Matrix3D 関数 (matrix3d)
1246 3Dフォトギャラリー
1247 Matrix3Dの合成 Multiply Matrix3D
1248 Rotate3D, Translate3D 関数 (rotate3d, translate3d)
1249 ボーダーのトランジション
1250 アウトラインのトランジション
1251 ボーダーイメージのトランジション (border-image)
1252-1 ボタンのトランジション1
1252-2 ボタンのトランジション2
1253-1 メニューのトランジション1 (text-overflow)
1253-2 メニューのトランジション2
1254 Clip プロパティ (clip)
1255 Mask プロパティ (-webkit-mask)
1256 Reflect プロパティ (-webkit-box-reflect)
1257 CSSで図形を作る

付録: 度数、ラジアン、sin、cos、tan対応表

【 目次 第2部「Animationを使いこなす編」】~・~・~・~・~・~・~・~・~・~・~・~・~・~

※赤字の項目を「CSS3アニメーション&トランジション」 試用版でお試しいただけます。

1300 Animationプロパティを使う
1310 Animationの指定項目(keyframes)
1310-1 Animation-name, animation-duration
1310-2 Animation-timing-function
1310-3 Animation-delay
1310-4 Animation-iteration-count
1310-5 Animation-direction
1310-6 Animation-fill-mode
1310-7 Animation-play-state
1310-8 Animationショートハンド
1320 Animationのトリガー(開始させるきっかけ)の方法
1321 画像を動かす(直線移動、往復移動)
1322 画像を動かす(オーバーフロー)
1323 画像を動かす(回転の中心)
1324 画像を動かす(円、楕円、渦巻き運動)
1325 画像を動かす(旋回)
1326 画像を動かす(蛇行)
1327 画像を動かす(放物線を描く落下、バウンド)
1328 CSSで描いた図形を動かす
1329-1 Linear Gradation(線形グラデーション)のアニメーション(1)
1329-2 Linear Gradationのアニメーション(2)
1330-1 Radial Gradation(円形グラデーション)のアニメーション(1)
1330-2 Radial Gradationのアニメーション(2)
1331 Clippingの効果
1332 Maskingの効果
1333 Reflectionの効果
1334 テキストのアニメーション
1335 見出し(タイトル)のアニメーション
1336 ボタンのアニメーション
1337-1 メニューのアニメーション(1)
1337-2 メニューのアニメーション(2)
1337-3 メニューのアニメーション(3)
1338-1 ボーダーのアニメーション(1)
1338-2 ボーダーのアニメーション(2)
1339 アウトラインのアニメーション
1340 飾り文字を作る
1341 マーキー(Marquee)
1342-1 応用1 Kissing Fishes
1342-2 応用1 Moon Orbit
1342-3 応用1 Skew Wheel
1342-4 応用1 Brick and Cockroach
1342-5 応用1 Open Cards
1342-6 応用1 Backface Image
1342-7 応用1 Rotate 3D Cube
1343 アニメーションを連続させる
1344 背景の画像を動かす(車窓から)
1345-1 アニメーションのシーン展開をする(1)
1345-2 アニメーションのシーン展開をする(2)
1346-1 応用2 Bounce Ball
1346-2 応用2 Robot Walk
1346-3 応用2 Robot Swing
1346-4 応用2 Car Driving
1346-5 応用2 Space Trip
1346-6 応用2 Falling Leaves
1346-7 応用2 Image Carousel
1346-8 応用2 Photo Gallery
1346-9 応用2 Class Selector

【 スマートフォン、タブレットへの対応 】~・~・~・~・~・~・~・~・~・~・~・~・~・~・~


本書で説明しているHTML5とCSS3トランジション、CSS3アニメーションの仕様はW3C(World Wide Web Consortium:Web技術標準化団体)が作っている世界標準の仕様なのでパソコンはもちろんのことスマートフォンやタブレット(iPhone、iPad、Androidのスマホやタブレットなど)でも動かすことができます。
ただ1つだけ注意が必要です。animationプロパティを使用したアニメーションはパソコン、スマートフォン、タブレットでそのまま問題なく動きますが、transitionプロパティを使用したトランジションについては、スマートフォンとタブレットはタッチスクリーン式でマウスが付いていないため、トランジションが動くきっかけとなるhoverができません。スマートフォンとタブレットで画面をタップし続ける(押し続ける)ことがhoverと同じような機能になるようにするためにつぎのような工夫が必要です。 ・ ・ ・ ・ ・

※「CSS3アニメーション&トランジション」 試用版 には「スマートフォン、タブレットへの対応」は含まれません。


製品版のご購入はこちらからお申し込みください。

■製品版の紹介

・テキスト(PDF)
・サンプル(HTMLとCSS)
・製品版の購入申し込みのページからダウンロードできます。(下のボタンをクリックしてください。)
・ご購入後は、会員番号(またはメールアドレス)とパスワードで、会員ページから何度でもダウンロードできます。改訂版もダウンロードできます。

“解説書を読んでサンプルを真似して作ってみる” ⇒ その繰り返しでCSS3アニメーション(およびCSS3トランジション)の簡単なものから徐々に高度で繊細なアニメーションまで作れるようになります。

本屋さんで探しても、このような本は見つかりません。
「CSS3アニメーションとCSS3トランジションの作り方」および「アニメーションとトランジションさせることができるCSSプロパティ」について解説した、日本で初めて(いや世界で初めて)の本です。

本屋さんでは買えません。
CSS3アニメーションとCSS3トランジションを日本に早急に普及させる必要があると思い、できるだけ価格を押さえるために、インターネットで電子版での販売のみとしています。
製品版のテキスト(PDF)とサンプルソース(HTMLとCSS)を980円でダウンロードできます。(もし紙ベースの本にしたなら、上・下巻で5~6千円ほどの書籍になると思われます。)

ご購入後、本書の内容で分かりにくい部分があれば、お気軽にご質問ください。
できる範囲で回答いたします。

■「CSS3アニメーション&トランジション」製品版