anime.jsというライブラリで動かせません。

anime.jsという、アニメーション外部ライブラリを使ってみたのですが、サイトの通りにやってもうまくいきませんでした。修正すべき点を教えてください。

半透明の正方形が、右に240px移動しながら球形に変形するというものなのですが、表示すらされません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <link rel="stylesheet" href="animetest.css">
7    <script src="anime.js"></script>
8    <title>FallingBall</title>
9</head>
10
11<body>
12
13    <div id="cssProperties">
14        <div class="square shadow"></div>
15        <div class="square el"></div>
16    </div>
17    <script src="animetest.js"></script>
18</body>
19
20</html>

CSS
1.shadow {
2    position: absolute;
3    opacity: .2;
4}
5
6.square {
7    pointer-events: none;
8    width: 28px;
9    height: 28px;
10    margin: 1px;
11    font-size: 12px;
12}

Javascript
1(function () {
2    var cssProperties = anime({
3        targets: '#cssProperties .el',
4        opacity: .5,
5        left: '240px',
6        backgroundColor: '#AAA',
7        borderRadius: ['0em', '2em'],
8        easing: 'easeInOutQuad'
9
10    });
11});

試したこと

・functionを抜いた。
・leftを、rightにしてみた。
・anime.jsを、anime.min.jsにしてみた。

補足情報（FW/ツールのバージョンなど）

動作環境　GoogleChrome

行動規範の内容に同意します

回答2件

ベストアンサー

あまり詳しくドキュメントを見ていませんが
translateX: 240
を追加したら右に動きましたよ。

JavaScript
1var cssProperties = anime({
2    targets: '#cssProperties .el',
3    opacity: .5,
4    translateX: 240,
5    backgroundColor: '#AAA',
6    borderRadius: ['0em', '2em'],
7    easing: 'easeInOutQuad'
8});

left は解りませんでした。

投稿2018/12/24 06:16

trick

総合スコア366

GGga

2018/12/25 00:23

その書き方あるのは知りませんでした。もう少し勉強が必要ですね。ありがとうございました！

行動規範の内容に同意します

js
1(function () {
2    var cssProperties = anime({
3        targets: '#cssProperties .el',
4        opacity: .5,
5        left: '240px',
6        backgroundColor: '#AAA',
7        borderRadius: ['0em', '2em'],
8        easing: 'easeInOutQuad'
9
10    });
11})(); // とりあえず関数が実行されていないです。

投稿2018/12/24 05:23

kei344

総合スコア69407

GGga

2018/12/24 05:47

var cssProperties = anime({ targets: '#cssProperties .el', opacity: .5, left: '240px', backgroundColor: '#AAA', borderRadius: ['0em', '2em'], easing: 'easeInOutQuad' }); document.querySelector('#cssProperties').onclick = cssProperties.restart; こんな感じでfunctionを外してクリックしたら実行するようにしました。ですが、これでも右に移動しませんでした。