変化といった意味になります。アニメーションに関するプロパティですね。難しく表現すると「時間的変化」を表現するものです。マテリアルの表現はtransitionを理解せずには実現できません。マテリアルデザインの鍵を握るtransitionについて解説していきます。W3Cの公式ドキュメントはこちらです。おわり内包している4つのプロパティの役割backgroundやborderなどのプロパティと似ていて、transitionも4つプロパティを一括で指定できるCSSです。まとめて表現できるプロパティをショートハンドプロパティを呼ばれたりします。時間(アニメーションが開始するまでの間)の4つのプロパティを指定できます。初期値は以下のとおり。0s;という書き方になるわけです。それぞの要素を個別に深掘りしていきます。transition-propertyアニメーションの効果を表現するプロパティです。実例を見ていきましょう。変化対象となる、background、width、heightのすべてにアニメーションが適応されているのが分かります。指定外のbackground、heightは直ぐに切り替わり、widthだけにアニメーションが適応されているのが分かります。#009688;}transition-durationアニメーションが開始してから終わるまでの時間を指定できるプロパティです。1秒)実例を見ていきましょう。変化が開始してから終わるまでの時間が1秒となります。変化が開始してから終わるまでが5秒となります。#009688;}transition-timing-function変化の表現を指定するプロパティです。一定のスピード、最初を早く段々遅く、などを指定できます。各値の違いを見てみようease、linear、ease-in、ease-out、ease-in-outの各値を並べてみました。開始から終了までのアニメーション時間は同じですが、動きがそれぞれ異なることが分かります。アニメーションを確認するeaselinearease-inease-outease-in-outtransition-delayアニメーションが始まるまでの時間を指定できるプロパティです。1秒)1sを指定した場合アニメーション開始までに1秒かかっていることが分かります。#009688;}3sを指定した場合アニメーション開始までに3秒かかっていることが分かります。#009688;}transitionでまとめて記載するtransition-property、transition-duration、transition-timing-function、transition-delayはまとめて書くことができます。[transition-delay]という並びになります。実例としては以下のような感じです。#009688;}ずいぶんとスッキリしますね。@haniwa008transitionプロパティについて解説しました。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。同じカテゴリーの一覧を見る次の記事マテリアルデザインを設計する上で欠かせないCSS「transform」につ...前の記事スクロールの途中で出現するフローティングボタンのJavaScriptはにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。