はじめてのCSS3アニメーション

CSSでアニメーションできないプロパティ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSSでアニメーションできるプロパティとできないプロパティをMDNのサイトで調べます。
講師:
03:54

字幕

このレッスンでは、 CSSでアニメーションが できるプロパティ、できないプロパティを どうやって調べれば良いか、 ウェブを使ってご紹介したいと思います。 さて、画面にはすでに、 アニメーションが可能な CSSプロパティの一覧という項目を 出してあるんですが、 そもそもこのページに どうやってたどり着けばいいかと、 いうことですね。 MDNを調べてみます。 MDNのCSSリファレンス。 というのは是非活用していただきたい ページなんですけれども、 この、項目の一個上、「CSS」とあります。 ここからたどることができます。 ではクリックしましょう。 そして開くのがCSSに関する 様々なドキュメントです。 このリファレンスをクリックすると、 元の場所 CSSリファレンスに戻ります。 その下の方を見てみると、 他にもドキュメントがあります。 特に新しい機能などですね。 そういったものについては リファレンスとは別に、 説明書きがあると、いうことで、 今回「トランジション」を調べていますので、 「CSSトランジション」、これをクリックします。 ここにも、いろいろ使い方、 あるいはトランジション・プロパティを使った サンプルなどが 表示されているんですけれども、 その一頭上のリンク、 「アニメーションが可能なCSS プロパティの一覧」と、 これが先ほどお見せした、 この項目になります。 もっとも、この項目の本文は2行しかありません。 そして、リンクがありまして、 こちらの文章の一覧、 をみましょう、ということなのですが、 ではクリックしてみます。 そうすると、英語のドキュメントなので、 ここでちょっと萎えてしまう方が いるかもしれませんが、 プロパティを調べるだけですから、 ページをたどっていくと、 「アニメーションができるプロパティ」というのが、 リストとして出ています。 さて、アニメーションをするときに、 気をつけなければいけないことが 幾つかあるんですが、 その中の一つとして、 ディスプレイ・プロパティを noneにしてはいけないと、 いうのがあります。 例えばそういったものを どうやって調べるかということなんですが、 noneでいきましょう。 ディスプレイ・プロパティの noneでいきましょう。 検索で、 ディスプレイと、入れてあげると、 ラッキーなことに項目が一つしかないですね。 えー、今回はとてもラッキーです。 さてここの項目何かといいますと、 「サポートされないトランジション」 についての項目です。 これらの項目、これらの仕様については、 「トランジションの アニメーションがサポートしませんよ」と、 いうことになっています。 そして、ディスプレイについては どうやって書いてあるかというと、 「ディスプレイ」のプロパティで、 「none」と「他のもの」 「他のプロパティ」・・・、の値・・・、については、 「サポートされていません」と、 いうことになっています。 ということなので、 ディスプレイのプロパティ、noneを設定して、 アニメーションをさせようとすると、 アニメーションができないと、 いうことになります。 ディスプレイで、例えば、表示、非表示の場合には、 オパシティを使って、表示が1、 透明にしたかったら0にすると、 表示、非表示を切り替えることができます。 そして、オパシティは、 アニメーションできるプ ロパティですので、 それを使っていただくと、 いうことになるわけです。 このレッスンでは、 CSSアニメーションの できるプロパティとできないプロパティを MDNのサイトで調べました。 サイトの調べ方としては、 MDNの「CSS」という項目の中で、 「CSS transitionの使用」 いうページを辿りまして、 その中にある、 「アニメーションが可能なCSS プロパティの一覧」 そして、さらにそっから、リンクで、 英文の・・・、一覧を、見る、 いうことで確認ができました。

はじめてのCSS3アニメーション

最近のブラウザではCSS3の実装が進み、JavaScriptを使わなくてもダイナミックでインタラクティブなコンテンツが作れるようになってきました。このコースではこれまでの静的なCSSの基礎を学んだ方を対象に、そのようなアニメーションをCSSでどう定めればいいのか、その書き方や考え方について解説します。

2時間39分 (29 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。