CSS3動畫是眾多Web設計師和開發者喜愛的一種動畫方式。相比傳統的JavaScript實現動畫方式，CSS3動畫簡單易懂，代碼也更加直觀。手寫CSS3動畫是一項非常有趣的工作，下面我們來介紹一些基本的手寫CSS3動畫效果。

/* 1. 翻轉動畫 */
.box {
width: 200px;
height: 200px;
transform-style: preserve-3d; /* 3D轉換模式 */ 
transition: transform .5s ease-in-out; /* 過渡效果 */
}
.box:hover {
transform: rotateY(180deg); /* Y軸旋轉180度 */
}
/* 2. 淡入淡出動畫 */
.fade-in-out {
opacity: 0;
transition: opacity .5s ease-in-out; /* 過渡效果 */ 
}
.fade-in-out:hover {
opacity: 1;
}
/* 3. 圖片縮放動畫 */
img.scale {
transition: transform .3s ease-in-out; /* 過渡效果 */ 
}
img.scale:hover {
transform: scale(1.2); /* 放大1.2倍 */ 
}
/* 4. 文字滑動動畫 */
.bounce {
position: relative; /* 相對定位 */ 
animation: bounce 2s ease-in-out infinite; /* 動畫名稱 */ 
}
@keyframes bounce {
0%, 100% { left: 0; } /* 開始和結束位置 */ 
50% { left: 50px; } /* 中間位置 */
}
/* 5. 表格行高亮動畫 */
table tr {
transition: background-color .3s ease-in-out; /* 過渡效果 */ 
}
table tr:hover {
background-color: #ccc; /* 高亮顏色 */ 
}

以上就是一些常用的手寫CSS3動畫效果。通過學習和掌握這些動畫效果，可以為我們的網頁設計添加更多的生命力和感性魅力。