CSS3和HTML5動畫代碼是現代Web設計的兩個最重要的技術架構之一。

HTML5動畫主要是利用Canvas和SVG創建矢量動畫，而CSS3動畫則是利用CSS屬性和關鍵幀來實現動畫效果。

/* CSS3動畫實例 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; 
animation-duration: 4s;
}
@keyframes example {
0%   {background-color: red;}
50%  {background-color: yellow;}
100% {background-color: green;}
}

上面的代碼是一個簡單的CSS3動畫實例，它會使一個紅色的方形變換成黃色，最后變為綠色。其中animation-duration屬性指定該動畫的持續時間，而@keyframes指示了動畫的關鍵幀。

/* HTML5動畫實例 */

上面的代碼演示了如何使用Canvas在Web頁面上創建矢量圖形。Canvas可以以像素為單位繪制形狀，所以可以用來制作圖形、圖表和動態圖像等。

總的來說，CSS3和HTML5動畫是Web設計的重要組成部分，通過掌握這兩者的知識和技能，可以打造出更豐富、更生動的Web頁面和應用。