アニメーションの設定ができるCSS『Magic』を使ってみる

要素にclassを付与するだけで、手軽にアニメーションを追加できるCSS「Magic」を使ってみたので、使い方をメモしておきます。

サンプルコード

動きに関しては公式のデモページを見てもらえるとわかりやすいと思います。

magic.cssを読み込みます。

<link rel="stylesheet" href="magic.css">

アニメーションさせる要素を配置します。

HTML

<div id="sample"></div>

JavaScriptでアニメーションをしたいタイミングでclassを追加すればOKです。
例えば、buttonクリック時に「twisterInDown」を実行する場合は以下のようになります。

JavaScript

$(function() {
	$('#controls button').click(function() {
		$('#sample').addClass('magictime twisterInDown');
	});
});

上記で追加している.magictimeは、アニメーションの時間などを設定しているclassになります。

magic.css

.magictime {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

例えば、アニメーションの時間を3秒にしたい場合は以下のように書き換えると変更できます。

magic.css

.magictime {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

ただし、magic.css内の.magictimeを書き換えると全てに反映されてしまうので、実際に変更する場合はアニメーション要素毎に個別に上書きしていく方がよいと思います。
　

【参考サイト】

• Magic Animations CSS3
• GitHub – miniMAC/magic: CSS3 Animations with special effects