[分享]css3如何实现上下跳跃动画

在CSS3中，有一种很酷炫的动画效果，就是元素的上下跳跃动画。这种效果可以用CSS3的transition和animation属性来实现。/ 使用transition属性来实现上下跳跃效果 / .bo...

在CSS3中，有一种很酷炫的动画效果，就是元素的上下跳跃动画。这种效果可以用CSS3的transition和animation属性来实现。

/* 使用transition属性来实现上下跳跃效果 */

.box {
  position: relative;
  top: 0;
  transition: top .3s ease-in-out;
}

.box:hover {
  top: -10px;
} 

在上面的代码中，我们给盒子元素设置了相对定位，并且初始化top属性为0。然后使用transition属性来让top属性有变化时有动画效果，时间为0.3秒，缓动函数为ease-in-out。最后在hover状态下将top属性的值设置为-10px，触发上下跳跃效果。

/* 使用animation属性来实现上下跳跃效果 */

.box {
  position: relative;
  animation: jump .5s ease-in-out infinite alternate;
}

@keyframes jump {
  from {
    top: 0;
  }
  to {
    top: -10px;
  }
} 

在上面的代码中，我们在盒子元素上使用了animation属性，并定义了一个jump动画，时间为0.5秒，往返运动，缓动函数为ease-in-out，并且动画无限循环。在@keyframes中，我们定义了动画的两个状态，一个是从top为0开始，另一个是top为-10px，这样就可以实现上下跳跃效果。

总的来说，使用transition和animation属性实现上下跳跃效果都很简单，只需要掌握好属性的使用，就可以实现炫酷的动画效果了。