(CSS)ローディングアイコンとポップアップアイコンのつくりかた(動画付き)

疑問

ブラウザでよくみるローディングアイコンとポップアップでどうやってつくるの？

CSSでつくりたいんだけど、、、

そんな方への記事です。

回転するアイコンをつくるには、まずwidthとheightを使って、四角をつくります。

border-radius: 50%;を使って、円にします。

border-right-color: transparent;を使って、右側を透明にします。

＠keyframeで、アニメーションをつくります。

transforms:rotate(360deg);で回転するアニメーションが作れます。

animation: ;　で、@keyframesと紐付けます。

.8s infinite linear;　で、0,8秒で無限に等速回転するアニメーションができました。

ポップアップアニメーションをしたい要素をつくります。

positision: fixed;　で、位置を指定していきます。

@keyframes でアニメーションの設定をします。

transform:translateY();で、0%と100%の位置を指定して、opacity:0;を使って、透明にします。

30％と80%の位置を、transform: none;　と　opacity: 0;を設定すると、元の位置へ見える形で戻ってきます。

animation: pops;で、アニメーションを紐付けます。

animation-fill-mode: forwards;で、アニメーションの終わり位置で終了するようにします。

フワッとポップアップするアニメーションがつくれました。

CSSの短いコードだけでも、面白いアイコンはつくれます。

@keyframesでアニメーションの内容を決めて、animation: ;で紐づけることがポイントです！

一緒に一歩踏み出しましょう♪