css3で要素の大きさを変えるアニメーションを実装してみる

CSS on 25 Mar , 2015

cssのtransformを使うと
比較的軽量かつスムーズなアニメーションを実装できる。

ここ最近では、Jqueryと併用されることも増えてきたんじゃなかろうか。

JqueryのAnimateよりもcssのtransformのほうが
スマートフォン端末ではスムーズにうごいたりする。

是非積極的に活用していきたいところです。

今回は、要素の大きさを自在に変える例を書いておきます。

transformのscaleを使用します。

①CSS側でアニメ設定


@-moz-keyframes scaleAnim{
0%{-moz-transform: scale(0, 0);}
50%{-moz-transform: scale(5, 5);}
100%{-moz-transform: scale(1, 1);}
}

@-webkit-keyframes scaleAnim{
0%{-webkit-transform: scale(0, 0);}
50%{-webkit-transform: scale(5, 5);}
100%{-webkit-transform: scale(1, 1);}
}

@-o-keyframes anime1 scaleAnim{
0%{-o-transform: scale(0, 0);}
50%{-o-transform: scale(5, 5);}
100%{-o-transform: scale(1, 1);}
}

@-ms-keyframes scaleAnim{
0%{-ms-transform: scale(0, 0);}
50%{-ms-transform: scale(5, 5);}
100%{-ms-transform: scale(1, 1);}
}

パーセント(%)はスタート時の大きさを0%とし、
アニメの終了時の大きさを100%とします。
scaleのカッコ内は通常時からみて縦横をどのくらいの縮尺にするかの指数です。

上記の場合、アニメ読み込み時はその要素の大きさを0とし、一度5倍にしたのち、等倍に戻す!

といった意味になります。

ちなみにだらだらと4つのアニメを設定しているのは
念のためベンダープレフィックスをつけた書き方で書いているためです。(備忘録です。。。)

②js側でアニメの発火


$(".sample").click(function() {
$(this).css({
"-ms-animation":"scaleAnim 1s alternate 1",
"-moz-animation":"scaleAnim 1s alternate 1",
"-o-animation":"scaleAnim 1s alternate 1",
"-webkit-animation":"scaleAnim 1s alternate 1"
})
})

css側だけでもアニメ再生は可能ですが
クリックしたなどのイベントに紐づける場合は
Jqueryと併用したら楽ですね。

この場合クリックした要素自体を「バイーン」とさせるのを想定してます。バイーンて。。。
設定した4つのアニメーションをcssに適用してるだけです。

以上、是非試してみてください!