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动画来增强网站的交互性了。继续试验和探索吧，创造出更棒的动画效果，让你的网站更加生动有趣！