HTML 移动动画实现：简单示例及代码解析

以下是一个简单的移动动画示例，使用 HTML 和 CSS 实现：

<!DOCTYPE html>
<html>
<head>
	<title>移动动画示例</title>
	<style>
		#box {
			width: 50px;
			height: 50px;
			background-color: red;
			position: relative;
			animation-name: move;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
		}

		@keyframes move {
			from {left: 0;}
			to {left: 200px;}
		}
	</style>
</head>
<body>
	<div id='box'></div>
</body>
</html>

在这个示例中，我们创建了一个红色的正方形 div 元素，并将其位置设为相对定位。我们还定义了一个名为 'move' 的动画，使 div 元素沿着水平方向从左到右移动。我们使用 animation-name 属性指定动画名称，animation-duration 属性指定动画持续时间，animation-iteration-count 属性指定动画重复次数，animation-direction 属性指定动画的播放方向。最终结果是一个永久循环的移动动画。