如動圖所示：????我單擊增大按鈕時，div寬度緩慢增大有動畫效果，恩這好沒問題。問題在于我單擊縮小按鈕時，div刷的一下就縮小了毫無動畫，我是添加動畫的啊，怎么沒有效果，是我哪里理解錯了嗎？還是其他原因？初學這個樣式，麻煩大家指點一下。源碼：<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>demo</title>
<style>
div{
width:?100px;
height:?100px;
background:?#0000FF;
}
@keyframes?animation1{
from{
width:?100px;
}
to{
width:?300px;
}
}
@keyframe?animation2{
from{
width:?300px;
}
to{
width:?50px;
}
}
.an1{
animation:animation1?1s?forwards?;
}
.an2{
animation:animation2?1s?forwards?;
}
</style>
</head>
<body>
<div?id="div">
</div>
<input?type="button"??id="btn1"???onclick="x1()"?value="增大"?/>
<input?type="button"??id="btn2"???onclick="x2()"??value="縮小"?/>
<script>
function?x1(){
document.getElementById("div").className="an1";
}
function?x2(){
document.getElementById("div").className="an2";
}
</script>
</body>
</html>
添加回答
舉報
0/150
提交
取消