具有变换的css样式的元素：翻译动画

Question

如果我使用transform：translate将动画应用于具有css样式的元素 例如

transform: translateY(100px);

在动画结束时，元素跳转到所需位置。如何避免这种跳跃并获得平滑动画到所需位置？

http://jsfiddle.net/alexchetv/bc49LnLt/

Answer 1

只需删除最后一个关键帧：

to {
  transform: none;
}

＆＃13;

＆＃13;

div {
    width:20px;
    height:20px;
    background-color:#f00;
    animation:bounceInDown 1s;
    transform: translateY(100px);
}

@keyframes bounceInDown {
  from, 60%, 75%, 90% {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您在Opera和Chrome上遇到此问题，那么它是Webkit中的一个偷偷摸摸的错误。但是，希望这两行能有所帮助。

 -webkit-animation-timing-function: ease-out;
 animation-timing-function: ease-out;