【ANIME.JS】アニメーションに利用するパラメータ一覧

2018年3月31日JavaScriptANIME.JS, JavaScriptライブラリ

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

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

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

この記事ではANIME.JSでアニメーション実装に利用する各種パラメータをリストアップしています

ANIME.JSで使えるアニメーション動作一覧

利用できるパラメータを組み合わせてアニメーションを実装可能です

rotate回転数値(度)、1turnなど

パラメータ 説明
opacity 透明度 0~1 
top、bottom、left、right 移動 数値(px)や%など
translateX、translateY 移動 数値(px)や%など
scale 拡大・縮小 数値
backgroundColor 背景色 カラー名、カラーコード
borderRadius 枠の丸み 数値(pxやemなど)[’10px’,’10px’]
width 横幅  
height 縦幅  
fontSize 文字サイズ  
color 文字色  

ANIME.JSのアニメーションで利用するパラメータ一覧

パラメータ 説明 デフォルトの値
targets 対象の要素 セレクタ名など  
duration アニメーション時間 数値(ms)または関数 1000
delay ディレイ 数値(ms)または関数 0
easing イージング  リスト参照 easeOutElastic
elasticity 弾性 数値または関数 500
round     false
autoplay   true、false true
loop  繰り返し 数値またはfalse false
direction  アニメーション動作 normal、reverse、alternate normal

ANIME.JSの「easing」で利用できる値一覧

easeIn easeOut easeInOut
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInBack easeOutBack easeInOutBack
easeInElastic easeOutElastic easeInOutElastic

2018年3月31日JavaScriptANIME.JS, JavaScriptライブラリ

Posted by Yousuke.U