CSS 如何创建 CSS3 反弹效果

How to create CSS3 bounce effect

提问by It worked yesterday.

I am trying to create a bounce effect at the end of the animation without using any 3rd party code or javascript. I have no idea of how to do this only using pure CSS.

我试图在动画结束时创建一个反弹效果，而不使用任何 3rd 方代码或 javascript。我不知道如何只使用纯 CSS 来做到这一点。

Here is what I have so far:

这是我到目前为止所拥有的：

HTML:

HTML：

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

CSS:

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);
}

DEMO

演示

回答by Henrik Karlsson

If all you need is a very simple bounce, it's as easy as just changing the transition function from ease-into something else, such as a cubic-bezier.

如果你需要的是一个非常简单的反弹，它是那么容易，因为刚刚从改变转移函数ease-in别的东西，如一个cubic-bezier。

An example of a cubic-bezierfunction that bounces would be

cubic-bezier反弹函数的一个例子是

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

A full example:

一个完整的例子：

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>

You can find a few examples of other easings at easings.net, or a full cubic-bezier editor at cubic-bezier.com.

你可以找到其他渐变效果的几个例子easings.net，在全立方贝塞尔曲线编辑器或cubic-bezier.com。

回答by xengravity

I'm a fan of animate.css

我是 animate.css 的粉丝

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

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

Coincidentally, the first animation is bounce.

巧合的是，第一个动画是bounce。

You can extract the code you need from the css file.

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

Using the animate.css framework i've extracted their bounce animation and have created a snippet below:

使用 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>