魔法の CSS3 でさまざまな魔法のインタラクティブ アニメーション効果を作成します_html/css_WEB-ITnose

Magic CSS3 Animations アニメーションは、Web プロジェクトで自由に使用できるユニークな CSS3 アニメーション効果パッケージです。 CSS スタイルをページに導入するだけで、magic.css または圧縮バージョンの magic.min.css を使用できるようになります。 このプロジェクトは現在 GitHub に公開されており、キラキラ、遠近法、回転、スライド、ブリキ、爆弾、その他多くの特殊効果が含まれています。

使用法:

まずスタイル ファイルを導入します:

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

次に、アニメーション効果を実現したい要素にクラス magictime とアニメーション クラス名を追加します。例:

$('.yourdiv').hover(function () {  $(this).addClass('magictime puffIn');});

一定時間後にアニメーションを実行するには、次のように記述できます:

setTimeout(function(){    $('.yourdiv').addClass('magictime puffIn');}, 5000);

アニメーションをループで実行することもできます:

setInterval(function(){     $('.yourdiv').toggleClass('magictime puffIn');}, 3000 );

アニメーションの実行時間をカスタマイズして、時間パラメータを変更します:

.magictime {	-webkit-animation-duration: 1s;	-moz-animation-duration: 1s;	-o-animation-duration: 1s;	animation-duration: 1s;}

If 特定のアニメーション効果の変更である場合、次のようになります:

.magictime.magic {	-webkit-animation-duration: 10s;	-moz-animation-duration: 10s;	-o-animation-duration: 10s;	animation-duration: 10s;}

今すぐダウンロード オンラインデモ