CSS動畫在網站設計中非常常見，它可以讓網站變得活躍起來，吸引用戶的注意力。然而，有時候我們會遇到一種情況，就是“CSS動畫一開始不顯示”。

.animation {
animation: myanimation 1s ease-in-out;
opacity: 0; /* 初始狀態為透明 */
}
@keyframes myanimation {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

上面是一個簡單的CSS動畫代碼，我們可以看到，在animation屬性中我們設定了一個名為“myanimation”的動畫，它的動畫效果是：0%時元素透明度為0且縮小為原來的一半，100%時完全顯示且大小為原來的1倍。

在代碼中，我們設置了初始狀態為透明（opacity: 0;），但問題在于動畫一開始不會顯示。

這是因為動畫開始時元素的屬性值與動畫的第1幀重合，所以看不到動畫效果。要解決這個問題很簡單，只需要將動畫的屬性值設定為與元素狀態不同即可。

.animation {
animation: myanimation 1s ease-in-out;
opacity: 1; /* 元素初始狀態完全顯示 */
}
@keyframes myanimation {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

修改后的代碼中，我們將元素的初始狀態設置為完全顯示（opacity: 1;），這樣動畫就能夠正常顯示了。

總結起來，當CSS動畫一開始不顯示的時候，可以通過設定動畫的屬性值與元素狀態不同的方法來解決問題。不過需要注意的是，動畫的起始值應當盡量與元素狀態不同，否則會導致動畫效果不明顯。