HTML5動畫是現在越來越普及的一種網頁設計方式，它可以增加網頁的趣味性和交互體驗。下面介紹一些HTML5動畫效果怎么設置。

/* 設置基本動畫樣式 */
#animate {
width: 100px;
height: 100px;
position: relative;
animation-name: example;
animation-duration: 4s;
}
/* 定義動畫關鍵幀 */
@keyframes example {
0% {
left: 0;
top: 0;
background-color: red;
}
50% {
left: 200px;
top:0;
background-color: blue;
}
100% {
left: 200px;
top: 200px;
background-color: green;
}
}
/* 設置動畫的時間函數 */
#animate {
animation-timing-function: ease-in-out;
}
/* 設置動畫循環次數 */
#animate {
animation-iteration-count: infinite;
}

以上是一個簡單的HTML5動畫設置的樣例。首先，我們需要設置基本動畫樣式，包括寬度、高度、位置等。然后，在CSS中定義動畫關鍵幀，即動畫從開始到結束的過程中需要改變的屬性值。比如，在這個例子中，我們將讓一個正方形從左上角移動到右下角，并且在過程中改變背景顏色。

接著，我們可以設置動畫的時間函數，也就是控制動畫在不同時間節點上移動的速度。其中，ease-in-out是一種動畫平滑處理函數，會使得動畫在開始和結束的位置緩慢，而在中間位置快速運動。

最后，我們還可以設置動畫的循環次數。在這個例子中，我們設置動畫無限循環。

綜上所述，HTML5動畫的設置需要考慮很多因素，包括動畫樣式、關鍵幀定義、時間函數和循環次數等。學會掌握這些技巧，就可以讓網頁呈現出更生動、更豐富的交互效果。