如何创建CSS3弹跳效果

Question

我正在尝试在动画末尾添加反弹效果，而不使用任何第三方代码或 JavaScript。我成功创建了动画，但无法实现弹跳效果。

这就是我到目前为止所做的：

HTML：

<div></div>
<div></div>
<div></div>

CSS：

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in;
    transform-origin: top left;
}
div:hover { 
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

演示

Answer 1

如果您需要的只是一个非常简单的反弹，那么只需将过渡函数从

ease-in

更改为其他值（例如

cubic-bezier

）即可。

弹跳的

cubic-bezier

函数的一个示例是

cubic-bezier(0.175, 0.885, 0.32, 1.275)

完整示例：

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top left;
}
div:hover {
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

<div></div>
<div></div>
<div></div>

您可以在 easings.net 找到其他缓动的一些示例，或者在 cubic-bezier.com 找到完整的三次贝塞尔曲线编辑器。

Answer 2

我是 animate.css 的粉丝

http://daneden.github.io/animate.css/

巧合的是，第一个动画是弹跳。

您可以从css文件中提取您需要的代码。

使用 animate.css 框架，我提取了它们的弹跳动画并创建了下面的代码片段：

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

div{background:red; padding:50px;}

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

Answer 3

这可以仅使用

transition

属性（而不是需要关键帧的

animation

）使用有点新的（截至撰写时）

linear()

函数（参见支持表）来完成。

💡 MDN 有一个非常详细的页面解释它

将鼠标悬停在演示上即可开始弹跳：

body{ height: 100vh; }
*{ margin:0; padding:0; }

body:hover div {
  margin-left: calc(100vw - 100px);
  background: blue;
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  transition: 1s linear(
    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 13.6%, 0.25, 0.391, 0.563, 0.765,
    1, 0.891 40.9%, 0.848, 0.813, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785,
    0.813, 0.848, 0.891 68.2%, 1 72.7%, 0.973, 0.953, 0.941, 0.938, 0.941, 0.953,
    0.973, 1, 0.988, 0.984, 0.988, 1
  );
}

<div></div>