HTML5動畫是一種通用的Web開發(fā)技術(shù)，能夠創(chuàng)建各種有趣和吸引人的動畫效果。在這篇文章中，我們將分享HTML5動畫代碼大全，幫助開發(fā)者更高效地制作動畫效果。

1.基本動畫效果

// 令元素向下移動
@keyframes moveDown {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(50px);
}
}
// 在實現(xiàn)動畫時，給元素添加上動畫效果
.box {
animation: moveDown 1s linear infinite;
}

2.背景顏色過渡動畫

// 實現(xiàn)背景顏色逐漸變深的效果
@keyframes bgColor {
0% {
background-color: #ff0000;
}
100% {
background-color: #0000ff;
}
}
.box {
animation: bgColor 2s linear infinite;
}

3.旋轉(zhuǎn)動畫

// 讓元素繞Y軸旋轉(zhuǎn)360度
@keyframes rotateY {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.box {
animation: rotateY 2s linear infinite;
}

4.閃爍動畫

// 使元素透明度從0變?yōu)?，再從1變回0
@keyframes blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.box {
animation: blink 1s linear infinite;
}

5.多重動畫

// 可以通過在一個元素上定義多個關(guān)鍵幀來創(chuàng)建多個動畫效果
@keyframes rotate {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes move {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0px);
}
}
.box {
animation: rotate 2s linear infinite, move 2s ease-in-out infinite;
}

這些是 HTML5 動畫的常用示例代碼。開發(fā)者可以根據(jù)項目需要選擇合適的動畫組合，以創(chuàng)造令人驚嘆的動態(tài)效果。