css3 弹跳 动画 |css 水波浪

首先，大家需要一个div作为动画元素，然后写出以下的CSS样式：

.animation {
position: relative;
top: 0;
animation: bounce 1s ease-in-out;
}
@keyframes bounce {
0%, 100% {
top: 0;
}
50% {
top: -10px;
}
}

上面的代码中，大家设置了一个animation动画属性，这个属性告诉浏览器使用哪种动画，以及动画执行的时间和动画的缓动效果。

在上面的代码中，大家还设置了关键帧动画，也就是定义了动画的开始和结束状态，以及中间进行的状态。在这个动画中，大家定义了三个状态：0%、50%、100%。表示在动画的开始、中间和结束的状态下，top属性的值分别是0、-10px和0。这样大家就实现了一个简单的弹跳动画。

需要注意的是，CSS3动画还有很多的属性，如循环次数、动画方向、动画是否暂停等等，可以根据需要进行设置。