キーフレームを設定してポップアップの動きを作っていきます。

・ポップアップですが、最初に少し下のほうに配置しておいて、そこから上にスッと出てきて、ちょっととどまったあとに、下にスッと消えるという動きを作ってみましょう。

・@keyframes を作っていきますが、とりあえず位置だけ動かしてみましょう。@keyframes の名前は今回 popup にしておきます。

・0% の地点の @keyframes ですが、下のほうに下がっていて欲しいので、 translateY で 20px くらいにしておきましょう。

・20% の地点で元の位置に戻って欲しいので、 transform: none; としておきましょう。80% の地点までそのままで居て欲しいので、こちらも none にしておきます。

・100% の地点ではまた下に下がって欲しいので、 translateY(20px) とします。

・アニメーションプロパティを指定していきます。名前のpopupの指定と秒数今回は２秒、このままだとまた上の位置に戻ってしまうのでanimation-fill-mode の forwards を使えばおkです。

・最初は消しておいて、上にいったら表示されて、下にいったらまた消えるという効果を作ってみましょう。

・要素を消す方法ですが、いくつかの方法がありますが、間違えやすいのがここで dispay: none; としてしまうことです。このようにしてしまうと、要素の存在自体が消えてしまうので、このようなスタイルをつけることができません。

・アニメーションで表示を消すときには、要素を消すのではなくて、単に表示、非表示を切り替える、 visibility プロパティを使ってあげます。

・最初は消しておきたいので、 hidden にしておき、0% の状態のときで、表示してあげて、アニメーションが終わったときにまた隠せばいいので、 visibility: hidden; を１００%に指定してあげれば OK かと思います。

-広告-

楽天で購入

楽天で購入