CSS 中的起立 (PPT) 动画

Question

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

我们如何才能在 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

使用 cubic-bezier(0.02, 1.24, 1, 1.18) 而不是 ease-out。

根据需要更改坐标值。

此外，-moz- 前缀不是必需的，@keyframes 在 Firefox 上是 fully supported。

img {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 60px;
  left: 60px;
  -webkit-animation: jump 1s cubic-bezier(0.02, 1.24, 1, 1.18);
  animation: jump 1s cubic-bezier(0.02, 1.24, 1, 1.18);
}
@-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">

Answer 2

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

重点是，如果您希望通过简单的 translate 动画让球 return，两个手柄的 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">

CSS 中的起立 (PPT) 动画

Rise up (PPT) animation in CSS

css

powerpoint

css-animations