HTML5動(dòng)畫是越來越流行的一種動(dòng)畫形式，它基于HTML5技術(shù)構(gòu)建，支持各種設(shè)備和瀏覽器。要了解HTML5動(dòng)畫的簡(jiǎn)單源代碼，你需要了解HTML5的基礎(chǔ)知識(shí)，以及JavaScript和CSS動(dòng)畫的知識(shí)。下面我們將介紹一些HTML5動(dòng)畫的基礎(chǔ)知識(shí)，并提供一些簡(jiǎn)單的代碼示例。

在HTML5中，我們可以使用<canvas>或SVG來創(chuàng)建動(dòng)畫。在這里，我們將介紹如何使用<canvas>來創(chuàng)建動(dòng)畫。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>

以上代碼將在畫布上繪制一個(gè)矩形，顏色為紅色。首先，我們使用document.getElementById("myCanvas")獲取畫布元素，然后使用getContext("2d")方法來獲取畫布上下文。接下來，我們使用fillStyle屬性來設(shè)置填充顏色，并使用fillRect()方法來繪制矩形。

除了使用<canvas>元素來創(chuàng)建動(dòng)畫，我們還可以使用CSS3動(dòng)畫。下面是一個(gè)使用CSS3動(dòng)畫來創(chuàng)建動(dòng)畫的簡(jiǎn)單示例：

<div id="myDiv"></div>
<style>
#myDiv {
width: 50px;
height: 50px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
0%   {left: 0px; top: 0px;}
25%  {left: 200px; top: 0px;}
50%  {left: 200px; top: 200px;}
75%  {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
</style>

以上代碼將在屏幕上創(chuàng)建一個(gè)帶有紅色背景的