CSS3是一種用來美化網(wǎng)頁的技術(shù)，其中之一的功能就是動畫效果，而animation both則是其中較為常用的一種。

animation both可以讓動畫正反兩個方向都有相同的效果，這樣可以讓動畫更為流暢，而且代碼也比較簡單，下面是一個實例：

/* 定義一個動畫 */
@keyframes move {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}
/* 使用動畫，同時設(shè)置both屬性 */
.box {
width: 50px;
height: 50px;
background-color: red;
animation: move 2s both;  /* both屬性 */
}

上面的代碼會讓一個紅色的方塊在2秒內(nèi)沿著X軸方向向右移動100px，同時動畫結(jié)束后方塊會維持在移動的位置（即持續(xù)動畫效果）。如果沒有設(shè)置both屬性，那么動畫結(jié)束后方塊會回到原來的位置。

當(dāng)然，除了both屬性，還有其他的屬性可以使用，例如forwards和backwards屬性可以分別讓動畫結(jié)束后保持當(dāng)前狀態(tài)以及開始狀態(tài)，同時animation-fill-mode屬性也可以控制動畫的結(jié)束狀態(tài)。

總之，animation both雖然簡單，但也是一個非常實用的技術(shù)，在許多網(wǎng)站的設(shè)計中都可以看到它的影子。學(xué)習(xí)CSS3動畫的同時，了解這些屬性以及它們的用法可以讓我們更有效地使用它們，創(chuàng)造出更為美妙的動態(tài)效果。