css上下跳动动画

　　CSS上下跳动动画是一种让元素在页面上来回弹动的效果，在网页设计中会经常用到，下面将介绍如何用CSS实现这种动画效果。

 　　.anim{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　animation: bounce 1s infinite;
　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　@keyframes bounce{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　0%{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　transform: translateY(0);
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　50%{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　transform: translateY(-20px);
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　100%{
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　transform: translateY(0);
　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　以上代码首先给需要实现动画效果的元素添加一个class样式名，例如.anim，然后利用CSS3的animation属性添加动画效果，其中“bounce”是动画名称，“1s”是动画执行的时间，“infinite”表示动画循环次数。

　　接下来，在@keyframes代码块中定义动画的具体效果。每个百分比应该对应一个动画状态，例如0%对应初始状态，100%对应结束状态。这里我们定义了三个状态，分别为开始、中间和结束。

　　在0%状态时，元素处于原始的垂直位置，使用transform: translateY(0);实现。在50%状态时，元素向上移动20像素，使用transform: translateY(-20px);实现。在100%状态时，元素回到原始位置，使用transform: translateY(0);实现。通过这样的定义，使元素实现来回跳动的效果。

　　在实际应用中，我们可以根据需要调整动画的执行时间和循环次数，以及自定义动画的状态，实现各种不同的效果。利用CSS实现动画效果不仅性能较高，而且代码简洁，可以大大提高网页的交互性和美观度。