CSS是前端開發中必不可少的一部分，它不僅可以美化網頁，還可以實現很多有趣的動畫效果。以下是一些常見的CSS屬性，可以幫助我們實現各種動畫效果：

/* transition */
/* 當hover時，圖片慢慢放大、邊框變粗 */
img:hover {
transform: scale(1.2);
border-width: 3px;
transition: all 0.2s ease-in-out;
}
/* 當點擊按鈕時，背景顏色從白色變成黑色 */
button:focus {
background-color: black;
transition: background-color 0.2s ease-out;
}
/* animation */
/* 無限旋轉的星星 */
.star {
display: inline-block;
width: 100px;
height: 100px;
background: url(star.png);
animation: spin 2s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg) }
}
/* 當hover時，圖片從中心旋轉 */
img:hover {
animation: spin 2s linear;
}
@keyframes spin {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
/* transform */
/* 當hover時，文字從下往上彈出 */
.text {
position: relative;
top: 0;
transition: top 0.3s ease-in-out;
}
.text:hover {
top: -10px;
}
/* 當hover時，圖片翻轉 */
img:hover {
transform: rotateY(180deg);
}

總結：這些CSS屬性可以幫助我們實現許多有趣的動畫效果，讓網頁更生動、更具吸引力。我們可以根據需求靈活運用這些屬性，創造出獨特的、令人印象深刻的動畫效果。