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

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

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

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

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

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