CSS頁面加動畫效果圖是許多網站開發者都樂于探索的技術，它能夠為網站帶來活力，增加用戶體驗，提高網站的吸引力。在本文中，我將為大家介紹一些常用的css動畫效果。

.fadeIn {
animation-name: fadeIn;
animation-duration: 2s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

首先，讓我們來看一個簡單的CSS淡入效果。當鼠標滑動到元素時，元素開始從透明度為0漸變為完全不透明。在這段CSS代碼中，我們定義了一個fadeIn類，將其綁定到需要使用的元素上，并設置了動畫的名稱和持續時間。接下來，我們使用keyframes關鍵字來定義動畫的開始和結束狀態，實現從透明到不透明的漸變效果。

.rotate {
animation-name: rotate;
animation-duration: 1s;
animation-iteration-count: infinite;
transform-origin: center;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

接下來，我們來看一個元素旋轉效果。在這段CSS代碼中，我們定義了一個rotate類，為動畫設置了名稱、持續時間、以及無限次數的循環播放。我們還使用transform-origin來改變元素的旋轉中心。在keyframes中，我們使用transform函數來改變元素的旋轉狀態，從0度到360度，實現了元素旋轉的效果。

.scale {
animation-name: scale;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform-origin: center;
}
@keyframes scale {
from { transform: scale(1); }
to { transform: scale(1.5); }
}

最后，我們來看一個元素縮放效果。在這段CSS代碼中，我們定義了一個scale類，為動畫設置了名稱、持續時間、以及無限次數的循環播放。我們還使用transform-origin來改變元素的縮放中心。在keyframes中，我們使用transform函數來改變元素的縮放狀態，從1倍到1.5倍，實現了元素縮放的效果。另外，我們還使用了animation-direction來讓動畫來回播放，實現更加豐富的效果。

除了以上的動畫，我們還可以使用CSS來實現各種效果，比如下拉菜單、模態框、進度條等等。只需熟練掌握CSS的各種屬性和使用方法，就能夠自由發揮創意，讓網站的設計更加精彩。