如动图所示：
我单击增大按钮时，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>stone310