CSS3中提供了很多動畫效果，其中透明度動畫也是非常常見的一種。本文將介紹如何使用CSS3實現透明度從透明到不透明的動畫效果。

/* 首先需要定義一個動畫關鍵幀 */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 然后在需要添加動畫的元素上應用該動畫，并設置一些樣式 */
.element {
opacity: 0; /* 初始狀態為完全透明 */
animation: fade-in 1s forwards; /* 指定動畫名稱、動畫持續時間和結束后保持最后一幀狀態 */
}

在上面的代碼中，我們定義了一個名為“fade-in”的關鍵幀，它將元素從不透明（opacity: 0）漸變到完全不透明（opacity: 1）。然后，在需要添加動畫的元素上定義了一個名為“fade-in”的動畫，它持續1秒鐘，并在結束后保持最后一幀狀態。

如果需要實現透明度從不透明到透明的動畫，只需要將關鍵幀中的“from”和“to”改為相反的值即可。

/* 透明度從不透明到透明的動畫 */
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 應用動畫 */
.element {
opacity: 1; /* 初始狀態為完全不透明 */
animation: fade-out 1s forwards;
}

上述代碼中，我們定義了一個名為“fade-out”的關鍵幀，它將元素從完全不透明（opacity: 1）漸變到完全透明（opacity: 0）。與之前不同的是，在動畫應用的元素上，我們將初始狀態設為完全不透明。

CSS3提供的透明度動畫非常簡單，只需要定義關鍵幀和動畫，并將其應用到元素上即可。通過修改關鍵幀中的值，我們可以實現透明度從透明到不透明和從不透明到透明的動畫效果。