CSS3是前端開發中非常重要的技術，它不僅可以用來布局和美化網頁，還可以實現豐富的動畫效果，比如制作圖片從無到有的效果。

/*CSS樣式代碼*/
/*設置默認狀態下的圖片透明度為0*/
img{
opacity: 0;
}
/*設置動畫效果*/
img.show{
-webkit-animation-name: fadeIn;  /* Safari and Chrome */
-webkit-animation-duration: 2s;
animation-name: fadeIn;
animation-duration: 2s;
}
/*定義動畫幀*/
@-webkit-keyframes fadeIn {  /* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

首先，我們需要設置圖片的默認狀態下的透明度為0，這樣圖片就不會在頁面中顯示。然后，我們用CSS定義一個動畫效果，這里定義的是圖片淡入的效果，即從無到有。

接下來，我們需要定義動畫幀，這個過程實際上就是定義動畫的具體效果。我們使用@keyframes定義動畫幀，其中from表示動畫開始時的狀態，to表示動畫結束時的狀態。這里我們定義了兩個動畫幀，一個是針對Safari和Chrome瀏覽器的，另一個是針對其他瀏覽器的。

最后，我們需要在HTML代碼中使用JavaScript來觸發動畫。例如：

<img src="image.jpg" alt="" onclick="this.classList.add('show')">

當用戶點擊圖片時，JavaScript會將圖片的class屬性設置為show，從而觸發動畫效果。這樣，用戶就可以看到圖片從無到有的過程了。