css - CSS中的上升(PPT)动画

Question

在PPT Presentation中，有一个Rise up的选项。在该选项中，对象首先向上移动，减速，然后返回，最后停止。动画效果链接:

我们如何在 CSS 中实现它？

img {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 60px;
  left: 60px;
  -webkit-animation: jump 1s ease-out;
  -moz-animation: jump 1s ease-out;
  animation: jump 1s ease-out;
}
@-webkit-keyframes jump {
  0% {
    transform: translateX(600px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes jump {
  0% {
    transform: translateX(600px);
  }
  100% {
    transform: translateX(0px);
  }
}

<img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Circle.png">

我的版本可以，但不会像 PPT 动画那样向后跳转。

Answer 1

将 animation-timing-function 从 ease-out 更改为 cubic-bezier()

重点是，如果您希望球通过简单的translate 动画返回，两个 handle 的y 轴必须 大于一。

cubic-bezier(x1, y1, x2, y2) <-- 这里，y1 和 y2 应该 > 1。

img {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 60px;
  left: 60px;
  -webkit-animation: jump 1s cubic-bezier(0.3, 1.2, 0.8, 1.2);
  animation: jump 1s cubic-bezier(0.3, 1.2, 0.8, 1.2);
}
@-webkit-keyframes jump {
  0% {
    transform: translateX(600px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes jump {
  0% {
    transform: translateX(600px);
  }
  100% {
    transform: translateX(0px);
  }
}

<img src="http://i268.photobucket.com/albums/jj6/SK_CRISIS/Emblem%20BG%20PNGs/Circle.png">