css3写跳动动画

CSS3是一种可以实现各种动画效果的样式语言。使用CSS3的动画效果之一是跳动动画，它可以为网站添加增强的交互效果。

/* 定义一个要做动画的元素 */
.jump {
  font-size: 50px;
  animation: jump 1s infinite alternate;
}

/* 定义动画 */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

以上代码演示了如何通过CSS3在一个元素上创建跳动动画。首先定义了一个要做动画的元素，给它设置一个字体大小，并且使用animation属性来定义动画名称、持续时间（1秒）、循环次数（无限）、方向（交替）等属性。

接下来，在@keyframes块中定义跳动动画的具体内容。这里通过translateY属性实现纵向移动效果，从初始状态的0开始，100%结束时往上移动50px，创造了类似弹跳的效果。

通过这样的方式，我们可以很容易地通过CSS3实现各种跳动动画效果，为网站增加生动、有趣的动态元素。