在web頁面中，動畫效果是一種非常重要的視覺呈現方式。而css3中的動畫效果更是可以讓web開發者們創造出更加炫酷而且充滿活力的頁面效果。今天我們就來探索一些css3的經典動畫效果。

/*
 * 首先，我們需要在html中建立一個div元素容器，并在該元素中創建一個按鈕.
 */
點擊我
/*
 * 接著，在css中設置按鈕和容器的樣式.
 */
.animation-container {
position: relative;
}
.animation-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #008CBA;
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
}
/*
 * 現在，我們來添加一些動畫效果.
 */
/* 1. 按鈕點擊效果 */
.animation-btn:active {
transform: scale(0.9);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
/* 2. 按鈕懸浮效果 */
.animation-btn:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
transition: 0.3s; /* 使用transition實現平滑過渡 */
}
/* 3. 按鈕的反彈效果 */
@keyframes bounce {
0%   { transform: translateY(0px); }
50%  { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.animation-btn {
/* 先設置按鈕的靜態位置 */
top: calc(50% + 100px);
left: 50%;
transform: translate(-50%, -50%);
padding: 10px 20px;
background-color: #008CBA;
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
/* 在懸浮狀態下應用動畫 */
&:hover {
animation: bounce 0.5s;
animation-iteration-count: 2;
}
}

以上就是一些css3的經典動畫效果，當然這只是冰山一角，想要了解更多動畫效果的web開發者們可以在網上尋找更多資料，不斷地學習和創造，打造更加出色的頁面效果。