CSS動畫是一個非常強大的技術，它可以使網站更加生動有趣，增加用戶的交互性。

在這篇文章中，我們將談論如何通過在線編輯器使用CSS動畫來增強網頁的用戶體驗。

/* 旋轉動畫 */
.animated{
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to   {-webkit-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to   {transform: rotate(360deg);}
}
/* 跳躍動畫 */
.jump{
-webkit-animation: jump 1s infinite;
animation: jump 1s infinite;
}
@keyframes jump {
0%   { transform: translateY(0); }
50%  { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

上面的代碼展示了兩個簡單的CSS動畫，旋轉動畫和跳躍動畫。我們使用了@keyframes關鍵字，在每個關鍵幀上定義了不同的CSS屬性值，以實現不同的動畫效果。

如果你想在你的網站上使用這些動畫，只需要將上述代碼復制到你的CSS文件或頁面的style標簽中即可。

例如：

<div class="animated">Hello World</div> 
<div class="jump">Click me!</div>

現在，你已經知道如何使用CSS動畫來增強網站的交互性了。繼續試驗和探索吧，創造出更棒的動畫效果，讓你的網站更加生動有趣！