[分享]css3反复弹出动画

当我们设计网页时，有时候会需要一些有趣的动画效果来吸引用户的注意力。其中，CSS3提供的反复弹出动画是一个十分有趣且优雅的效果。.box{ width: 100px; height: 100px; b...

当我们设计网页时，有时候会需要一些有趣的动画效果来吸引用户的注意力。其中，CSS3提供的反复弹出动画是一个十分有趣且优雅的效果。

.box{
  width: 100px;
  height: 100px;
  background-color: #f60;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  animation: bounceInfinite 2s infinite;
}

@keyframes bounceInfinite{
  0%, 20%, 50%, 80%, 100%{
    transform: translateY(0);
  }
  40%{
    transform: translateY(-30px);
  }
  60%{
    transform: translateY(-15px);
  }
} 

如上代码所示，我们首先定义了一个名为.box的元素。在这个元素中，我们设置了其宽高和背景颜色，并且将其定位到屏幕中央。接着，我们使用animation属性定义了一个名为bounceInfinite的动画。该动画运行时间为2秒，运行次数为无限次。

接着，我们在CSS中定义了一个名为bounceInfinite的@keyframes规则。该规则将.box元素从初始状态逐渐变化为最终状态。这个动画过程中，我们使用了translateY()函数来使元素上下移动。具体来说，是将其移动到原始位置、上移30px、上移15px、上移30px、回到原始位置的过程中持续进行。

最终呈现出来的效果，就是一个不断反复上下弹动的元素。这个效果非常适合用在一些需要突出的按钮或者广告等。而且，该动画也可以相对简单地修改为其他方向或角度上的弹动效果，非常灵活。