CSS3のアニメーションテクニック

要素の3次元の動きをアニメーションさせる。

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
transitionプロパティを使って、要素の3次元の変換にアニメーションを与えます。
講師:
05:42

字幕

このレッスンでは 要素の3Dの回転に対して 滑らかなアニメーションを加えます 3セットの画像と テキストがありますけれども 最初は少し水平に 回った状態 回転した状態ですね ポインタを合わせると 正面に向くんですが 滑らかなアニメーションに なっています これを設定しましょう Dreamweaverで開いた HTMLドキュメントには まだ滑らかなアニメーションは 設定されていません もっとも3Dの変換は おこなっています こちらがy軸での回転 画像なんですけれどもそれが マウスポインタを重ねると 元に戻ると それから テキストの領域 についても同様ですね 回転があって 元に戻る ただし 滑らかなアニメーションの 設定はされていないので 変化は急激です 確認しましょう [ファイル]メニューから [ブラウザーでプレビュー] します マウスポインタを重ねると 正面を向くんですが ピタっとすぐに 向いてしまいますね これを 滑らかな変化な アニメーションにしたいと思います まず画像から設定しましょう 画像はこのimgのセレクタです 回転をしている わけですけれども アニメーションは transitionで加えます そして 最低限設定するのは 時間で 0.5秒としましょう 0.5s これで確認します 保存を一回してから [ブラウザーでプレビュー] します 画像だけですけれども 滑らかな回転になりました ただしテキストの方は パタッパタッと なってしまいますので こちらも 同様に設定します テキストの領域には bookinfoというクラスが 与えられています そこに 回転の設定が ありますので 回転と translateZ ですから移動ですね ここも同じように transitionの設定をします 時間は共通にします 0.5秒ですね ファイルを保存して [ブラウザーでプレビュー] します 今度は画像だけでなく テキストの領域の方も 滑らかなアニメーションに なりました もうちょっとだけ 付け加えたいと思います 加えるのは 遠近感の アニメーションです 遠近感というのは perspectiveというプロパティで 設定するんですが これを マウスポインタが 重なった時 li要素に マウスポインタが重なったときに 違う値にします ではbooksのidに対して li要素を hoverしたらと マウスポインタが 重なったら perspectiveを 元は500ピクセルに 設定してあるんですけれども もっと大きい値 5000にします perspective というのは 遠近感に影響します ですから マウスポインタが 重なったときと そうでないときで 遠近感が変わります 重なってない時は 500ピクセル 重なったら 5000と ですから 遠近感が 変わるんですけれども あ li要素の 綴りが逆ですね liに変えます それからこのperspectiveの変化も アニメーションにしますので ここにはtransitionを 加える必要があります transition 時間はそろえて 0.5としましょう ファイルを保存して 確認します [ブラウザーでプレビュー] です どう変わったでしょうか マウスポインタを 重ねると 遠近感も アニメーションされています 言われても わからないですね と思いましたので さっきの状態を タブで残しておきました 先ほどの場合は 機械的な動きになっていることに ご注目ください では今さっき 作った方は 戻るときに ご注目ください ちょっと 特にこの左側ですね せり出してくるような 感じがしますね 遠近感が正面を向いているときには 5000と大きいので 遠近差がなく見えます けれども せり出して来るとき せり出してくるときには perspectiveが 値が縮まりましたので 少し誇張された状態で 遠近感が 出てくるんですね ですから 奥と手前の差が 増えてくる と いうことになります もう一度比べてみましょう こちらが今作った方です そして 先ほどの方 言われれば なんとなく わかってきましたでしょうか もう一度確認します こちらが新しい方です 手前がすっと せりあがってくると いうのが感じていただければ 助かります このレッスンではy軸の 3Dの水平回転に対して transitionで 滑らかな アニメーションを加えました さらに最後は わかりにくかったかもしれませんが perspectiveの値を 変えることによって 値が小さいと 遠近感が強く 値が大きいと 遠近感が比較的薄いと そのアニメーションも 加えました

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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