最近在學習CSS動畫，發現一種非常酷炫的效果：圖片從左到右慢慢顯示出來。這種效果在網頁設計中非常常見，通過CSS屬性transform和transition可以輕松實現，下面我們來看看實現的具體步驟。

.img{
width:200px;
height:200px;
background-image:url(img.png);
background-repeat:no-repeat;
background-position:0 0;
transform:translateX(-100%);
transition:transform 1s ease;
}
.img.active{
transform:translateX(0%);
}

首先，我們創建一個類名為img的元素，利用CSS屬性填充背景并設置寬高。之后，我們通過background-position將背景圖片的X軸設置為0，這樣就能把圖片定位在左上角。

然后，我們使用transform屬性將元素偏移到左邊屏幕外，這里我們使用translateX(-100%)的值即可將元素推到屏幕左邊。由于推動的距離是-100%，所以我們需要使用transform-origin屬性設置元素變形的中心點，這里將設置為左端點。

為了實現慢慢出現的效果，我們使用transition屬性給元素添加一個動畫效果，這里我們設置transform屬性變化時長為1秒，并設置動畫速度為ease。

現在，我們只需要為元素添加一個類名active就能讓圖片慢慢從左到右顯示出來啦！