css3の@keyframesでポップアップなアニメーション

css3 jQuery

ぽよーんとなるアニメーションをcss3で作ってみました。

もぶcss3アニメーションだいすきーヽ('ω')ﾉ わー

DEMO

css3 @keyframesとは

cssでキーフレームのアニメーションが指定できるものです。そのままですね。

詳しくはこちらのリファレンスで！

http://www.htmq.com/css3/animation-name.shtml

 

DEMOのソースを見ながら解説をばー

HTML

<div class="main_area">
    <a href="#" class="btn">pop up!</a>
</div>
<div class="pop_box">
    //~pop up window
</div>

ボタンとポップアップのdivがあるだけ。

CSS

-webkit-animation-duration: 1.4s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: bottom center;

このプロパティがcss3アニメーションの基本の指定になります。

アニメの秒数や、動きの基準地点などを設定できます。

 

@-webkit-keyframes animation_on {
  20% {-webkit-transform: scale(1.2);}
  30% {-webkit-transform: scale(1);}
  40% {-webkit-transform: scale(1.06);}
  0%, 50%, 60%, 80%, 100% {-webkit-transform: scale(1);}
}

で、こちらはキーフレームの指定。-moz-は省いて記載しています。

「animation_on」という名前のアニメ―ションにしました。

全体のアニメの長さを100%として、そいつを%で区切ることでtransform（変形）のタイミングと内容を決めます。

今回はぽよーんとscaleだけのアニメですね。

 

.on{
  display: block;
  -webkit-animation-name: animation_on;
  -moz-animation-name: animation_on;
}

 "on" は「どのキーフレームアニメーションを付加するか」を指定しています。

さっきの「animation_on」を指定しているので、『onってクラスが付いたらanimation_onをさせるよ～』てことです。

ポイントはここ！

このanimation-nameの指定なんですが、通常はCSSの最初にでてきたdurationあたりに含めていることが多いのです。

click したときに "on" を付けて「表示 / 非表示」だけ切り替えればええやん(＾ω＾)

と思うところ。実は…

それだとFire Foxでは動きません！

 

なんでanimation-nameを同時に書くと動かないの？

ページを読み込んだときにアニメーションが走ってしまいます。

なので、正確には動かないとは少し違っていますが…

 

display:noneにしてても対象の要素が存在していると、アニメーションしてしまうようですね。

ボタンをクリックする度にぽよーんができなくなってしまうということです。

今回のようにモーダルだとページ表示してボタン押すまでに1.4秒なんて過ぎてしまうので、アニメーションがないみたいに見えます。

 

ChromeやSafariの場合はこの点、display:noneにしている要素は「存在しない」ものとして見てくれるらしく、一緒に指定していてもその度にアニメーションします。

というわけで

都度、アニメーションをつけるためには”on”と一緒にアニメーションをしてやると良いでしょう。

逆にこっちにdurationとかもまとめちゃってもいいんですけどね。

「アニメーションする要素」と「アニメーションの内容」が分かれてるほうが見やすいのでもぶはこうします。

 

以上、ぽよーんcssでした(((・ω・)))

 

▲Top