HTML5,CSS3のお勉強 その10 ーtransitionー

boxが瞬時に変化するCSSとboxが滑らかに変化するtransitionプロパティを使ってみます。css3で追加されたアニメーションです。同じ画面でソースコードによる表示の変化をみるために今回は「codepen」を初めて使ってみました。codepenとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるコードエディターで、ブラウザー内でコードをすぐに試してみることができます。 「codepen」の詳細はググってみればたくさん出てきます。

See the Pen gWEwVJ by tsuyoshi chiba (@yokopook24) on CodePen.

上の埋め込み画像の説明：
「HTMLボタン」をクリックするとHTMLソースコード画面に変わります。
「CSSボタン」をクリックするとCSSソースコード画面に変わります。
「Resultボタン」をクリックするとプレビュー画面に変わります。この画面でboxをマウスオーバーすると上の「box」は瞬時に変化します。そして下の「box」は滑らかに変化します