CSS3方塊動畫越來越流行，因為它們可以給網(wǎng)站帶來生動感和吸引力。也許你正在嘗試在你的網(wǎng)站上使用CSS3方塊動畫，但是你不知道該如何開始。在這篇文章中，我們將介紹如何使用CSS3來創(chuàng)建方塊動畫。

.box {
width: 50px;
height: 50px;
background-color: #268bd2;
position: relative;
animation: move 1s infinite alternate;
}
@keyframes move {
from {
left: 0;
}
to {
left: 100%;
}
}

首先，我們需要創(chuàng)建一個元素作為方塊動畫的容器。我們給這個元素設(shè)置了寬度、高度、背景顏色和相對定位。我們還給這個元素添加了一個名為move的動畫。

接下來，我們在@keyframes里定義 move 動畫的兩個狀態(tài)。在初始狀態(tài)下，我們讓元素在左側(cè)。而在結(jié)束狀態(tài)下，我們將元素向右移動到100%的位置。

最后，在動畫中，我們將 move 動畫設(shè)置為無限循環(huán)，以及在每次循環(huán)時交替播放動畫。這意味著每次播放，動畫會從開始位置到結(jié)束位置，再從結(jié)束位置返回到開始位置，不斷交替重復(fù)。

這就是如何使用CSS3創(chuàng)建一個簡單的方塊動畫。當(dāng)然，你可以根據(jù)自己的需要添加更多動畫效果。希望這篇文章能幫助你更好地掌握CSS3方塊動畫的技巧。