在CSS中上升（PPT）动画

Question

在PPT演示文稿中，可以选择上升。在该选项中，对象首先向上移动，减速，然后返回然后最终停止。链接到动画效果：

我们如何在CSS中制作它？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我的版本有效，但不会像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动画来返回球，那么两个句柄的 y轴必须更大而不是一个。

cubic-bezier(x1, y1, x2, y2)＆lt; - 此处，y1和y2应为＆gt; 1。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;