HTML 移动动画实现 - 使用 CSS Animation - 常规

以下是一个简单的 HTML 移动动画实现：

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>移动动画</title>
	<style>
		#box {
			position: absolute;
			top: 50px;
			left: 50px;
			width: 50px;
			height: 50px;
			background-color: red;
			animation: move 2s ease-in-out infinite;
		}

		@keyframes move {
			0% {
				top: 50px;
				left: 50px;
			}
			50% {
				top: 200px;
				left: 200px;
			}
			100% {
				top: 50px;
				left: 50px;
			}
		}
	</style>
</head>
<body>
	<div id='box'></div>
</body>
</html>

在上面的代码中，我们使用了 CSS 的 animation 属性来实现移动动画。通过 @keyframes 定义一系列关键帧，然后将其应用到元素上即可。在这个例子中，我们定义了一个名为 move 的动画，使元素在 2 秒内从左上角移动到右下角，再回到左上角，不断循环播放。