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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/25 00:23