キーフレームを設定してポップアップの動きを作っていきます。
- @keyframesの設定
- visibilityプロパティの設定
@keyframesの設定
・ポップアップですが、最初に少し下のほうに配置しておいて、そこから上にスッと出てきて、ちょっととどまったあとに、下にスッと消えるという動きを作ってみましょう。
・@keyframes を作っていきますが、とりあえず位置だけ動かしてみましょう。@keyframes の名前は今回 popup にしておきます。
・0% の地点の @keyframes ですが、下のほうに下がっていて欲しいので、 translateY で 20px くらいにしておきましょう。
・20% の地点で元の位置に戻って欲しいので、 transform: none; としておきましょう。80% の地点までそのままで居て欲しいので、こちらも none にしておきます。
・100% の地点ではまた下に下がって欲しいので、 translateY(20px) とします。
・アニメーションプロパティを指定していきます。名前のpopupの指定と秒数今回は2秒、このままだとまた上の位置に戻ってしまうのでanimation-fill-mode の forwards を使えばおkです。
visibilityプロパティの設定
・最初は消しておいて、上にいったら表示されて、下にいったらまた消えるという効果を作ってみましょう。
・要素を消す方法ですが、いくつかの方法がありますが、間違えやすいのがここで dispay: none; としてしまうことです。このようにしてしまうと、要素の存在自体が消えてしまうので、このようなスタイルをつけることができません。
・アニメーションで表示を消すときには、要素を消すのではなくて、単に表示、非表示を切り替える、 visibility プロパティを使ってあげます。
・最初は消しておきたいので、 hidden にしておき、0% の状態のときで、表示してあげて、アニメーションが終わったときにまた隠せばいいので、 visibility: hidden; を100%に指定してあげれば OK かと思います。
-広告-
|
|