CSS3によるタイポグラフィ

animationプロパティの構文

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
animationプロパティは、@keyframes規則とセットで定めなければなりません。
講師:
04:26

字幕

このレッスンでは要素のプロパティ値を アニメーションで変化させる アニメーションプロパティの 構文についてご説明します ブラウザで開いている HTMLドキュメントですが この文字に対してはアニメーションの 設定がされています ロードし直すと完全に透明な状態から 徐々に文字が浮き上がってきます 完全に浮き上がると アニメーションは終了です この構文がどうなっているか これからご説明します Dreamweaver CCでアニメーションを定めた HTMLドキュメントを開きました spanのセレクターに対して アニメーションプロパティが設定されています そしてアニメーションプロパティを定めた時に 覚えておかなければならないのは @keyframes規則というものを 別に置いておかなければいけないことです この規則というのは "from" "to" というキーワードで2つの状態を定めています アニメーションの開始した時の プロパティの設定がfromです そしてtoの中にアニメーションが 終了する時のプロパティの設定が 書いてあります そして@keyframes規則には 任意の好きな名前を付けます そしてこの@keyframes規則というのは 特段 どのセレクター どの要素の アニメーションを行う ということは認識していません その代わりアニメーションプロパティで この名前の@keyframes規則に従って アニメーションしなさいという 定めを行うわけです そしてその後にSpaceで区切って 様々な設定を行うのですが その設定はtransitionプロパティと ほぼ似通っています ですからこの設定はspanのセレクターに 対してアニメーションを設定します その規則がこれで それを5秒間かけて 行おうということです そしてこの規則というのは まず初めにカラーをRGBAの白で ただしアルファ0です そこからスタートしてtoでカラーを変えます 白にほぼ近い少し黄みがかったカラーですが アルファを0.9に上げるようになっています これで実際にブラウザで確認すると 先ほどのアニメーションと同じように ブラウザでプレビューで見てみますが 完全に透明から段々浮き上がってくる というアニメーションになるわけです このレッスンではプロパティ値を アニメーションで変化させるための アニメーションプロパティの構文について ご説明しました アニメーションプロパティの構文はその後に アニメーション名とSpace区切りで 設定をいろいろ置いていきます 特徴的なのはこのアニメーション名ですね これは@keyframes規則で定義します そしてその他の設定はいろいろありますが ほぼtransitionプロパティと同じです 長さ タイミング関数 遅れ 回数 方向 などがあります そして@keyframes規則ですが 構文は@keyframesに アニメーションの名前を付けます これは任意です そしてその{ }の中に"from"と"to"で 初まりと終わりのプロパティを定めます fromでは始まるときのプロパティ値を いくつでも設定することができます そしてtoでは終わるときのプロパティを 同様に設定すると 始まる時のプロパティfromから 終わるときのプロパティtoの状態に アニメーションが変わります これは規則を決めるだけですので アニメーションプロパティで その規則の名前を第一の値として置く ということでした

CSS3によるタイポグラフィ

このコースではCSSの基礎を理解された方を対象に、CSSを用いたさまざまな文字の魅力的な見せ方を紹介していきます。ひと文字単位で細かく文字をデザインしてゆく方法や、影やグラデーション、変形などを文字に設定する方法、またテキストを使ったアニメーションや便利なJavaScriptツール、Webフォントの使い方などについても解説します。

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

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

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

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