透明度を設定してより自然なアニメーションを作っていきます。
- opacityの設定
- transition-timing-functionの設定
opacityの設定
・アニメーションをもう少し滑らかにしたいので、 opacity を使って透明度を操作してあげましょう。
・0% の地点では、透明にしておきます。 20% の地点では不透明にしてあげると、だんだんと表示されていくはずです。80% までその状態で居て欲しくて、 100% になったらまた徐々に透明になって欲しいので、 opacity: 0; としておきます。
・20%と80%のように全く同じ設定になる場合は、カンマ区切りで書くこともできるので、覚えておいてもいいでしょう。
transition-timing-functionの設定
・パッと出てくるような動きには ease-out が適していました。
・animation-timing-function を ease-out に設定してあげれば、すごく微妙な違いなのですが、パッと出てくるような動きになるはずです。
-広告-
|
|