【ANIME.JS】アニメーションに利用するパラメータ一覧
軽量で使いやすいアニメーションに特化した人気のJavaScript拡張ライブラリ「ANIME.JS」
「ANIME.JS」はCSSアニメーションの操作だけでなくSVGやDOMアニメーションの操作も可能です
アニメーション関係のJavaScriptライブラリは他にも沢山ありますが、簡単に使えて機能も十分なのでオススメです、jQuery不要な点も良いと思います
https://naruhodo.repop.jp/anime-js-basic-code/この記事では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 |