anime-jsを使って四角に「拡大する」アニメーションをつけたい

###前提・実現したいこと
anime-jsというライブラリを使って四角を拡大させるアニメーションを実装したいです。

http://anime-js.com/documentation/#specificPropertyParameters
これの拡大のアニメーションだけを実装したいと思い、コードを抜粋して書き足したのですが、全くアニメーションが始まりません。

何とかしてこのライブラリを使って「ページを表示した後に拡大していく四角の処理」を実装したいです。
アドバイスお願いします。

###該当のソースコード
index.html

<!DOCTYPE html>
<head>
	<script type = "text/javascript" src = "anime.min.js"></script>
	<script type = "text/javascript" src = "expandElements.js"></script>
	<link rel = "stylesheet" href = "elements.css">
</head>
<body>
  	<div class="square"></div>
</body>

expandElements.js

var expandElements = anime({
  targets: '.square',
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  autoplay: true
});

elements.css

.square {
   width: 100px;
   height: 100px;
   background: red;
}

###試したこと
JavaScriptの関数にautoplayパラメータを付けたり、ファンクション化したりした

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

回答1件

ベストアンサー

自己解決しました。

headタグに書いていたファイルリンクを/body直上に移動することで想定通りの動作をしました。

投稿2017/04/06 11:21

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

anime-jsを使って四角に「拡大する」アニメーションをつけたい

関連した質問