コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
transitionプロパティの構文
このレッスンでは スタイルをアニメーションで切り替える transitionプロパティの構文について ご説明をします。 今開いてるのは「MDN」のリファレンスで 「transition」のページです。 このページを探すには、検索で mdn で transition というふうにすれば トップに出てくると思います。 それからこの 「CSS トランジションの使用」というのは トランジションを使ったアニメーションの 入門的な説明になっていますので もし興味を持った方は ご覧いただくといいでしょう。 今回はこの「transition」の リファレンスを見てみます。 そしてデモがあるんですね。 これを見てみると 分かりやすいんですけれども transitionプロパティで margin-right、これは アニメーションさせるプロパティ名です。 それから 2s とありますが、 s は seconds、秒ですね。 ですから2秒間かけて margin-right を変えるんだよということで 実際にここにポインタを合わせると 2秒かけて margin-right が 変わっています。 逆にマウスポインタ外すと 戻るんですけれども margin-right が変わっていますね。 けれど背景色とモジュールは パッと変わってしまいます。 ですから margin-right だけが アニメーションしていると。 今度は数字がひとつ加わりました。 やはり s ですから秒なんですけれども これは「ため」ですね。 いわゆるファイナルアンサーのあの司会者が グッとためる、一瞬止まるという アニメーションが最初に加わります。 一瞬止まってからアニメーションを始める 一瞬止まってからアニメーション始めると いうことになります。 ここに ease-in-out とあるのは 時間関数とかタイミング関数、 あるいはタイミングファンクションと いうんですけれども、 どのように変化するかという アニメーションの変化のさせ方を決める 関数です。 ease というのは 加速や減速なんですけれども in が始まり out が終わりですから 徐々に加速して最後は徐々に減速すると いう形になります。 見て分かりますかね。 ちょっと動きが機械的ではなくて 乗り物が動くようにだんだん加速して…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。