CSS

回転するアイコンをつくろう

animationを使って無限に回転するローディングアイコンを作っていきます。

  • @keyframesの設定
  • animationの設定
  • 等速運動の設定

@keyframesの設定

・今回はアニメーションプロパティを使ってローディングアイコンを作っていきます。

・HTMLではdivを使って要素を作り、クラス名をloadingとしておきます。

・CSSの方ではまず形を作っていきます。widthとheightを40pxにしてボーダーに色と太さ、線を指定していきます。border-right-color だけ transparent にしてみます。あとはボーダーレディウスを50%に指定すると丸くなります。

・次に@keyframesの指定をしていきます名前はspinとしておきます。

・0%にtransformをnoneに指定し、100%にtransformをrotate(360deg)に指定していきます。

・0% と 100% は from 、 to と書いてあげても OK です。

animationの設定

・animation の設定をしていきましょう。一括指定プロパティで spin を 0.8 秒かけて、ずっとアニメーションするようと書いてあげます。

等速運動の設定

・このままだと回転に違和感があるのでlinearをして回転を等速にしてあげます。

-広告-

 

 






-CSS