HTML和CSS動效是設計網站和應用程序的重要元素之一。HTML可以用來創建內容和結構，而CSS則用于樣式和美化。聯合起來，HTML和CSS可以創造出很多吸引人的動效。以下是一些例子，展示了HTML和CSS如何創建具有吸引力的動畫效果。

/* 縮放動畫 */
.box {
width: 60px;
height: 60px;
background-color: red;
animation-name: zoom;
animation-duration: 2s;
animation-timing-function: ease-out;
}
@keyframes zoom {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
/* 旋轉動畫 */
.box {
width: 60px;
height: 60px;
background-color: blue;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 1s;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 滑動動畫 */
.box {
width: 60px;
height: 60px;
background-color: green;
animation-name: slide;
animation-duration: 1s;
animation-timing-function: ease-out;
}
@keyframes slide {
from {
margin-left: 0px;
}
to {
margin-left: 100px;
}
}

以上動畫效果只是冰山一角，HTML和CSS還可以創建更多類型的動畫效果，如過渡動畫、漸變動畫、閃爍效果等等。這些動畫可以使網站和應用程序顯得更加現代和生動，吸引用戶的眼球，提升用戶體驗。