Elementの透明度と位置をアニメーションさせたい。
Element.animate() で実装できました。
デモ
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<textarea id="ta">hello</textarea>
<script>
animation();
function animation() {
elem("ta").animate({
"opacity": [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
"color": [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
},
{
"duration": 2000,
"iterations": Infinity
})
elem("ta").animate({
"marginLeft": ["0px", "100px"]
},
{
"duration": 1000,
"easing": "ease",
"iterations": Infinity
})
// 移動後の位置を設定しないと元に戻る
elem("ta").style.marginLeft = "100px";
}
function elem(id) {
return document.getElementById(id);
}
</script>
</body>
</html>
|
参考
Element.animate()
Animation
Keyframe Formats
EffectTiming
