【ANIME.JS】CSSアニメーションの簡単なサンプルコード

2018年3月10日2019年6月12日ANIME.JS,JavaScriptライブラリ,JavaScript

軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」

「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です

アニメーション関係のJavaScriptライブラリは他にも沢山ありますが、簡単に使えて機能も十分なのでオススメです、jQuery不要な点も良いですね

ANIME.JSのダウンロードまたはCDN

「ANIME.JS」のダウンロード

ダウンロードファイルはGitHubにて可能、設置したファイルを読み込むだけで簡単に利用できます

GitHub – juliangarnier/anime

<script src="anime.min.js"></script>

「ANIME.JS」のCDN

最新バージョンのCDNもあります

animejs – cdnjs.com

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

CSSアニメーション、動作サンプル

動作サンプル用の簡単な移動アニメーション、回転アニメーション、拡大縮小アニメーションです

See the Pen ANIME.JS CSS Animation by yochans (@yochans) on CodePen.

CSSアニメーション、サンプルコード

HTML

<div id="target1" class="target">0&MOVEt;/div>
<div id="target2" class="target">1&ROTATEt;/div>
<div id="target3" class="target">2&SCALEt;/div>

CSS

.target{
  width:100px;
  height:100px;
  margin:10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #01579B;
  color:#FFF;
}

JavaScript

document.getElementById('target1').addEventListener('click',function() {

  //移動アニメーション
  anime({
    targets: '#target1',
    translateX: 250
  });
  
});


document.getElementById('target2').addEventListener('click',function() {
  
    //回転アニメーション
  anime({
    targets: '#target2',
    rotate: 1800
  });
  
});


document.getElementById('target3').addEventListener('click',function() {
  
    //拡大縮小アニメーション
  anime({
    targets: '#target3',
    scale: 0.5
  });
  
});

単純に記述する事でデフォルトの「アニメーション時間」「繰り返し」「イージング」等の設定を確認できます