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

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

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

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

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