css跳动制作

CSS 跳动动画制作方法

使用 transform 和 animation 属性可以轻松实现元素的跳动效果。通过调整关键帧（@keyframes）中的缩放或位移值，可以控制跳动的幅度和节奏。

@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.element {
  animation: jump 0.5s infinite;
}

弹性跳动效果

结合 cubic-bezier 缓动函数可以让跳动更自然。通过调整贝塞尔曲线的参数，可以模拟真实弹跳物理效果。

.element {
  animation: jump 0.8s cubic-bezier(0.5, 1.5, 0.5, 1) infinite;
}

连续跳动动画

使用多个关键帧可以创建连续跳动效果。通过设置不同的时间百分比，可以控制每次跳动的间隔和高度。

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

跳动加载动画

将跳动效果应用于加载指示器时，可以结合 opacity 变化创造更生动的视觉效果。多个元素的延迟动画能形成波浪式跳动。

.loader span {
  animation: jump 1s ease-in-out infinite;
}
.loader span:nth-child(2) {
  animation-delay: 0.2s;
}
.loader span:nth-child(3) {
  animation-delay: 0.4s;
}

3D 跳动效果

添加 rotateX 或 perspective 属性可以让跳动具有三维空间感。这种技术适合需要突出立体感的界面元素。

@keyframes jump3D {
  0% {
    transform: perspective(500px) rotateX(0) translateY(0);
  }
  50% {
    transform: perspective(500px) rotateX(20deg) translateY(-50px);
  }
}

性能优化建议

使用 will-change 属性预声明动画元素，浏览器会提前优化。避免在跳动动画中同时改变多个属性，优先使用 transform 和 opacity 这类高性能属性。

.jumping-element {
  will-change: transform;
}