各位，最近我在使用html制作一个动画效果，在点击按钮后弹出gif ，gif 播放完毕后消失，更改页面文本。
但是我在如何监听gif播放 完毕上遇到了问题，这是我的页面代码请指正。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>price</title>
</head>
<body background="./space.png" style="background-repeat:no-repeat;background-size:100%;">
<div id='old1'>
<div style="position: static;width:50%;margin-left:25%;">
<p id='wb' style="font-size:150px;color:red;text-align:center;">Are You Ready</p>
</div>
<div style="position: static;text-align:center;">
<button style='width:230px;height:150px;font-size:50px;' onclick="closediv()" >开始抽奖!</button>
</div>
</div>
<div id="new1" style="margin-top:0px;width:100%;height:100%;position: fixed;background-color: grey;background-color:rgba(0,0,0,0.2);text-align:center">
<img src='./new.gif' style="width:900px" >
</div>
</body>
<script>
document.getElementById("new1").style.display = "none";
function closediv(){
document.getElementById("new1").style.display = "block";
document.getElementById("old1").style.display = "none";
}
</script>
</html>
