css上下跳动的动画

在网站设计中，动画效果能够为网站增添视觉美感，吸引用户的注意力。今天，我们来讲一下如何用CSS实现一个上下跳动的动画效果。

/*设置动画效果*/
@keyframes bounce{
  0%{transform: translateY(0);}
  50%{transform: translateY(-10px);}
  100%{transform: translateY(0);}
}

/*应用动画效果*/
.bounce{
  animation: bounce 1s infinite;
} 

代码中的关键在于两段CSS代码。首先，@keyframes规则会定义一个在动画过程中逐步改变样式的序列。这里我们定义了一个由三个关键帧组成的动画：

0%{transform: translateY(0);}
50%{transform: translateY(-10px);}
100%{transform: translateY(0);} 

这里我们使用transform属性中的translateY()方法来实现上下移动的效果。

接下来，我们将这个动画应用到HTML元素上，这里我们制作了一个跳动的球：

<div class="bounce"></div> 

这样就完成了一个简单的上下跳动动画效果。