HTML5 动画是一种在网页上创建动态视觉效果的方法，它可以使网页更加生动有趣，HTML5 提供了一些内置的标签和属性，如 <canvas>、<video>、<audio> 等，以及 CSS3 动画属性，如 @keyframes、transition 等，可以帮助我们轻松地实现各种动画效果，以下是一些常见的 HTML5 动画制作方法：
1、使用 <canvas> 标签绘制动画
<canvas> 标签是一个用于绘制图形的容器，可以使用 JavaScript 在其中绘制各种形状、线条和文本，要使用 <canvas> 制作动画，首先需要在 HTML 文件中创建一个 <canvas> 元素，并设置其宽度和高度，使用 JavaScript 编写一个函数来绘制动画的每一帧，通过调用 requestAnimationFrame() 函数来循环执行这个函数，从而实现动画效果。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = canvas.height / 2;
let radius = 20;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();
}
function updatePosition() {
x += (Math.random() - 0.5) * 5;
y += (Math.random() - 0.5) * 5;
radius += (Math.random() - 0.5) * 2;
}
function drawFrame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
updatePosition();
requestAnimationFrame(drawFrame);
}
drawFrame();
</script>
</body>
</html>
2、使用 CSS3 动画属性制作动画
CSS3 提供了一些动画属性，如 @keyframes、transition、animation 等，可以帮助我们轻松地实现各种动画效果，要使用 CSS3 制作动画，首先需要定义一个关键帧动画，然后在需要应用动画的元素上应用这个动画。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
div {
width: 100px;
height: 100px;
background-color: red;
animation: move 2s linear infinite;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3、使用 <video> 和 <audio> 标签播放动画和音频文件
<video> 和 <audio> 标签可以让我们轻松地在网页上播放视频和音频文件，要使用这两个标签，首先需要在 HTML 文件中创建一个 <video> 或 <audio> 元素，并设置其宽度、高度和源文件，可以使用 JavaScript 控制视频和音频的播放、暂停等操作。