HTML5制作動畫代碼

HTML5是一種新的Web標準，允許開發者制作更豐富、更互動的網站。其中一個重要的特性就是能夠使用HTML5制作動畫。HTML5動畫代碼可讀性強、易于維護，適合制作交互性較強的網站和應用。下面是一些HTML5動畫的示例代碼，使用pre標簽展示。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#FF0000";
context.fillRect(10, 10, 50, 50);
function update() {
// 每幀更新一個正方形的位置
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#FF0000";
context.fillRect(x, y, 50, 50);
x += vX;
y += vY;
if(x < 0 || x > canvas.width - 50) {
vX = -vX;
}
if(y < 0 || y > canvas.height - 50) {
vY = -vY;
}
}
var x = 10, y = 10, vX = 2, vY = 2;
setInterval(update, 20);
</script>

上面的代碼使用Canvas API制作了一個移動的正方形。使用Canvas API制作動畫的基本思路是在canvas元素內使用JavaScript控制元素的位置、大小和顏色等屬性，然后利用setInterval函數來重復繪制。使用Canvas API制作的動畫可以嵌入到任何網頁中。

<style>
#myDiv {
position: relative;
width: 100px;
height: 100px;
background-color: #FF0000;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes example {
from {left: 0px; top: 0px;}
to {left: 200px; top: 200px;}
}
</style>
<div id="myDiv"></div>

以上代碼使用CSS3中的動畫特性制作了一個移動的正方形。在CSS3中使用動畫的方式是定義關鍵幀（Keyframes），指定動畫的起點、終點，以及中間的過渡效果。這個動畫定義了一個從左上角移動到右下角的效果，持續4秒，并無限重復。 CSS3動畫的優勢在于可以使用CSS語法，代碼簡潔易懂。

除了Canvas API和CSS3動畫外，還有一些JavaScript庫可以用于HTML5動畫，例如GreenSock Animation Platform（GSAP）、Move.js、Animate.css等。這些庫提供了更高級的動畫控制手段，有助于制作更復雜的動畫效果。

總之，HTML5動畫代碼可以讓網站變得更加生動、有趣，提升用戶體驗。初學者可以先從簡單的示例入手，了解HTML5動畫的基本原理，然后逐漸掌握更高級的技巧。