CSS3 animation问题

如动图所示：

我单击增大按钮时，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>

Walk_

浏览 1466回答 1

1回答

stone310

@keyframes animation2 这里漏写了个s

0 0

随时随地看视频慕课网APP