CSS中的動畫是網頁設計中的重要組成部分，它可以為網頁增添動感和活力。不過在播放動畫之前，我們可能需要先隱藏這些元素，以便在特定的條件下觸發它們。

/* 隱藏動畫元素 */
.animation {
opacity: 0;
visibility: hidden;
}
/* 在觸發條件下顯示動畫 */
.animation.active {
opacity: 1;
visibility: visible;
animation: myAnimation 1s ease-in-out;
}
/* 定義動畫屬性 */
@keyframes myAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

在上面的代碼中，我們先將動畫元素設置為不可見，并在觸發條件下為其添加“active”類來顯示元素并播放動畫。在定義動畫時，我們使用@keyframes關鍵字來定義動畫的具體屬性。

需要注意的是，因為動畫元素在播放前被隱藏，所以在定義動畫時，我們需要將元素的初始狀態設置為所需初始狀態，以免播放時出現突兀的變化。