CSS

transitionでアニメーションさせてみよう

transitionプロパティを使って簡単な動きを作っていきます。

  • transition-property
  • transition-duration

 

transition-property

・アニメーションを作っていきます。今回は四角い要素をマウスホバーしたときに１秒間かけて丸くしていきたいと思います。

・まず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;としてあげます。

-広告-

 

 






-CSS