疑問
ブラウザでよくみるローディングアイコンとポップアップでどうやってつくるの?
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: ;で紐づけることがポイントです!
一緒に一歩踏み出しましょう♪
コメント