CSS animation指的是利用CSS3的動畫特性，實現網頁上元素的動態效果展示。在網頁制作中，CSS動畫不僅可以提升用戶的視覺體驗，同時也是網頁設計中不可缺少的技能。

在CSS動畫中，可以使用很多方法展示各種動畫效果。其中，打開動畫是一種常見的動畫效果，讓網頁上的元素在用戶點擊的時候有一個逐漸展開的效果。下面是一個簡單的例子，其中通過transition屬性來實現了打開動畫效果:

#box {
width: 500px;
height: 500px;
background-color: #424242;
color: #fff;
transition: all .5s ease;
overflow: hidden;
}
#box.open {
height: 800px;
}

在這段代碼中，我們首先定義了一個元素的樣式，它的寬、高、背景色、文字顏色都有定義。然后，我們通過transition屬性設置了元素發生改變的時候，如何過渡。".5s"指的是過渡時間為0.5秒，"all"指的是所有屬性都發生過渡，"ease"是表示動畫效果為漸變緩出的效果。最后，我們使用了overflow屬性來避免元素內容溢出。

接下來，我們定義了一個新的CSS類名，當執行點擊操作的時候，這個類會被添加到元素上。這個類的作用是讓元素高度變大，從而實現打開動畫效果。這是通過height屬性控制的，因為我們在開始定義元素時已經限制了高度，這里通過修改高度實現動畫效果。

實現打開動畫效果的關鍵在于transition屬性的設置，以及改變元素的屬性值。我們可以通過JS來控制屬性值的變化，從而實現動畫效果。下面是一個JS代碼示例:

var box = document.getElementById("box");
box.addEventListener("click", function(){
box.className = "open";
});

在這段代碼中，我們獲取了一個box元素，并給這個元素添加了一個點擊事件監聽函數。當用戶點擊box元素時，我們就把新的CSS類名（open）賦值給box元素。這個類名在CSS中定義好后，會觸發打開動畫效果的實現。至此，我們就完成了一個簡單的CSS打開動畫效果的實現。