How to use cubic-bezier to change the speed of a keyframe animation?

问题

I am trying to create a @keyframe animation to bring a box up from the bottom of the screen and then have it bounce off the top of the body of the HTML document. The method that I used to do this doesn't allow you to change the speed during the duration of the animation which intern doesn't make it look very realistic (See Code Below).

I have found an answer to my question the only problem is that I really don't understand how cubic-bezier is creating the animation. I would like to make sense of what the code is doing before I go ahead and just slap it into my project. So, yeah I guess the title of this question shouldn't be "How to use cubic-bezier to change the speed of a keyframe animation?" but "How does the cubic-bezier work and how is it working in this instance". I would absolutely appreciate it if someone could explain this a little and even give me a simple example of code to follow and understand.

Note: I have looked at Mozila Developer Network at this property and still don't fully understand how it works in or out of a @keyframe animation.

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('#square').className = 'bounce';
  document.querySelector('#square').style.display = 'block';
});
document.querySelector('#square').addEventListener('animationend', function(e) {
  if (e.animationName == 'animate-in') {
    document.querySelector('#square').removeAttribute('class');
  }
});

#button {
  display: block;
  position: absolute;
  left: 75px;
}

#square {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: tomato;
  animation-fill-mode: forwards;
}

.bounce {
  animation: animate-in 1.5s;
}

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

<input type="button" id="button" value="Run Animation">
<div id="square"></div>

回答1:

You may find by playing with the box on here https://matthewlein.com/ceaser/ that you get a decent understanding of cubic bezier.

Imagine a box. If you place a marker on:
bottom left corner of the box, it has a value of (0)
top right corner of the box, it has a value of (1)

But there are 4 values for cubic bezier e.g....
cubic-bezier(0.755, 0.050, 0.855, 0.060);

That is because there are in effect two markers (or start points).

The first two values are obtained from a starting point of the bottom left corner of the box, of which the value is (0,0). As you move the marker to the right, the first value changes, e.g.(0.755, 0.000). As you move the marker up the second value changes e.g.(0.755, 0.050).

The second two values are obtained by a starting point of top right of a box, of which the value is (1,1). As you move the marker to the left, the third value changes, e.g.(0.855, 1.000). As you move the marker down the fourth value changes e.g.(0.855, 0.060).

Values one and three (left and right) control the time, values two and four (up and down) control the animation.

Putting these values together makes (0.755, 0.050, 0.855, 0.060);

I have included a diagram (it does not show the same values as the example above) but should help to understand the information above.

来源：https://stackoverflow.com/questions/42940349/how-to-use-cubic-bezier-to-change-the-speed-of-a-keyframe-animation

标签

css

css3

css-animations