CSS3動畫為網(wǎng)頁設(shè)計帶來了更豐富的交互效果和更生動的視覺效果。平移動畫可以讓元素在網(wǎng)頁中沿著水平或垂直方向移動，提高網(wǎng)頁的動感和活力。接下來，我們將為大家提供一種基于CSS3平移動畫的源代碼：

.animating {
position: relative;
animation-name: slidein;
animation-duration: 3s;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%; 
}
to {
margin-left: 0%;
width: 100%;
}
}

首先，我們需要設(shè)置一個被動畫影響的元素，這里的類名是“animating”。接下來，在樣式表中我們?yōu)檫@個元素設(shè)置了一個“position: relative”，以便在動畫過程中在水平方向上移動。然后我們使用了“animation-name”屬性來命名我們的動畫，這里指定為“slidein”。接著，我們設(shè)置該動畫的持續(xù)時間為3秒。

在“@keyframes”規(guī)則內(nèi)部，我們?yōu)閯赢嬙O(shè)置了“from”和“to”狀態(tài)。在起始狀態(tài)下，該元素的左外邊距設(shè)置為100%、寬度設(shè)置為300%，使元素處于頁面的最右端。然后，到達(dá)終止?fàn)顟B(tài)時該元素的左外邊距將變?yōu)?%，寬度變?yōu)?00%，使元素在頁面左側(cè)緩慢進(jìn)入。

使用這段代碼，您可以輕松地為靜態(tài)網(wǎng)頁添加動態(tài)效果，并為您的用戶帶來更好的用戶體驗！