CSS

ポップアップアニメーションをもっとナチュラルに

透明度を設定してより自然なアニメーションを作っていきます。

  • opacityの設定
  • transition-timing-functionの設定

 

opacityの設定

・アニメーションをもう少し滑らかにしたいので、 opacity を使って透明度を操作してあげましょう。

・0% の地点では、透明にしておきます。 20% の地点では不透明にしてあげると、だんだんと表示されていくはずです。80% までその状態で居て欲しくて、 100% になったらまた徐々に透明になって欲しいので、 opacity: 0; としておきます。

・２０％と８０％のように全く同じ設定になる場合は、カンマ区切りで書くこともできるので、覚えておいてもいいでしょう。

transition-timing-functionの設定

・パッと出てくるような動きには ease-out が適していました。

・animation-timing-function を ease-out に設定してあげれば、すごく微妙な違いなのですが、パッと出てくるような動きになるはずです。

-広告-

 

 






-CSS