[株式会社レボルメ]ウェブのあれこれウェブを活用したいひとのためのブログ一覧にもどる2016/02/02HTML/CSSCSSのプロパティの変化を時間を指定するtransition:hoverなどの疑似クラスを利用してCSSのプロパティ値を変更させるとき、transitionを利用して時間経過で除々にプロパティ値を変化させることができあます。transitionのプロパティは4つtransition-durationtransition-duration:1s;変化にかかる時間を秒単位で指定します(1s、0.5sなど)。height;transitionの効果を適用するプロパティを指定します。適用するプロパティ名をカンマ区切りで記述することで複数指定できます。「all」としていすれば、transitionが適用できるプロパティすべてが対象となります。transition-delaytransition-delay:1s;transitionの変化が始まる時間を指定します。transition-delayに指定した時間経過後にプロパティ値が変化し始めます。transition-timing-functiontransition-timing-function:ease;transitionで変化するタイミングなどを指定します。始まり、ゆっくり終わるまた、上記以外にcubic-bezier関数で変化量を指定することもできます。ボタンやリンク要素などに最適ボタンやリンクなどはマウスオーバーでプロパティを変化させることが多いですよね。transitionを活用すれば、CSSのみでマウスオーバーのアニメーションを実現できます。株式会社レボルメWeb制作、SEO、アクセス解析、etcウェブのお悩み伺います。レボルメに相談してください。inc.revolme.co.jp。