CSS3 transition-timing-function

Question

我需要在this link的插槽中为我的div顶部设置动画。 我做了一些demo，但我的动画无法正常工作。我试图用jquery.easing.js做同样的结果。有人可以解释我的错误，我该如何解决这个问题。

我的CSS：

.box {
    width: 100px;
    height: 100px;
    position: relative;
    top: 40px;    
    background: red;
    -webkit-transition-duration: .2s;
      transition-duration: 2s;
      -webkit-transition-timing-function: cubic-bezier(.75, 1.95, .66,.56);
      transition-timing-function: cubic-bezier(.75, 1.95, .66, .56);
      -webkit-transition-property: top;
}
.box:hover{
    top: 500px;
}

Answer 1

我认为你的问题并不是时间功能不能正常工作，而是当div移动时，它会失去焦点和悬停......

这是你想要的吗？

＆＃13;

＆＃13;

.launcher {
    width: 200px;
   height: 100px;
  background-color: lightgreen;
}

.box {
    width: 100px;
    height: 100px;
    position: relative;
    top: 10px;
  left: 0px;
    background: red;
    -webkit-transition-duration: .2s;
      transition-duration: 2s;
      -webkit-transition-timing-function: cubic-bezier(.75, 1.95, .66,.56);
      transition-timing-function: cubic-bezier(.75, 1.95, .66, .56);
      -webkit-transition-property: left;
}
.launcher:hover + .box{
    left: 500px;
}

＆＃13;

<div class="launcher">hover me</div>
<div class="box"></div>

＆＃13;

＆＃13;

＆＃13;