jquery - CSS3 过渡计时功能

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移动的时候失去了焦点，hover...

这是你想要的吗？

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

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