CSS動畫是Web頁面設計中常用的一種特效，可以吸引用戶的眼球并且增加用戶體驗。本文將介紹如何使用CSS動畫實現寬度從左到右消失的效果。

/*添加CSS樣式*/
.box{
width:200px;
height:100px;
background-color:#48D1CC;
position: relative;
overflow: hidden;
}
.box:before{
content: "";
position: absolute;
left: -100%;
width: 100%;
height: 100%;
background-color: #fff;
transform: translateY(-100%);
transition: all 0.5s ease;
}
.box:hover:before{
left:0;
transform: translateY(0);
}

上面的代碼中，我們首先定義了一個寬度為200像素、高度為100像素、背景顏色為#48D1CC的盒子，然后把overflow屬性設置為hidden，這樣超出盒子邊界的內容會被隱藏起來。

接下來，我們添加一個:before偽類來實現動畫效果。設置position屬性為absolute，寬度為100%、高度為100%、背景顏色為白色，然后通過設置left屬性為-100%和transform屬性為translateY(-100%)，把偽類從盒子左側推出去，并且將其移動到盒子頂部。

最后，我們通過設置:hover偽類來觸發動畫效果。當鼠標懸浮在盒子上時，將:before偽類的left屬性設置為0，并且把transform屬性設置為translateY(0)，這樣就實現了寬度從左到右消失的效果。

通過簡單的CSS代碼，我們就可以實現一個優美的動畫效果，為我們的Web頁面增添更多的視覺效果。