transitionプロパティを使って簡単な動きを作っていきます。
- transition-property
- transition-duration
transition-property
・アニメーションを作っていきます。今回は四角い要素をマウスホバーしたときに1秒間かけて丸くしていきたいと思います。
・まずHTMLにdivでボックスを作っていきます。スタイリングしていきたいので box クラスをつけておきます。
・スタイリングはCSSのファイルで行っていきます。幅と高さをそれぞれ 100px にしてあげて、 background プロパティを pink にしてあげます。
・この box をアニメーションさせたいのですが、基本的な考え方としては、変化前のスタイル、変化後のスタイルを作って、その中間を補完するという手法になります。
・変化後のスタイルを作っていきます。今回は box にマウスホバーした時に変化するようにしたいので、 box に対して :hover としてあげます。
・今回は border を丸めてあげましょう。50% としてあげます。
・box のほうに transition で中間を補完するプロパティは border-radiusとしていきます。transition-property: border-radius;としていきます。
transition-duration
・そしてそれにかかる時間は 1 秒としたいのでそのように書くには、transition-duration: 1s;としてあげます。
-広告-
|
|