Question

现在我正在使用Rico St.Cruz brillant工作的query.transit库，但现在我必须改变一些与类有关的事情，而不是在CSS转换中这个公司。我试着

取代：

JS：

$("#target_element").mouseenter( function() {

  $("#arr_left")
    .transition( { x: 3 }, 300,  'easeOutSine' )
    .transition( { x: 0 }, 300,  'easeInSine' ); 
  };

}

与

JS：

$("#target_element").mouseenter( function() {

  $("#arr_left").addClass('hint');

}

CSS：

#arr_left.hint {
  -webkit-animation: hint_left 600ms;
  -moz-animation:    hint_left 600ms;
  -o-animation:      hint_left 600ms;
  animation:         hint_left 600ms;
}

@keyframes hint_left {
  0%, 100% {
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); /* easeOutSine */
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  }
  50% {
    -webkit-transform: translate(3px);
    -moz-transform: translate(3px);
    -o-transform: translate(3px);
    transform: translate(3px);
    -webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); /* easeInSine */
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715) ;
  }
}

但是这个新代码不起作用。

1）我在这里做错了什么？

2）达到此目的的最短代码（浏览器兼容）是什么？

另外：我想通过JS保持“提示”类的通用性，每个箭头都有一个特定的自己的翻译属性。非常感谢提前！

修改

http://jsfiddle.net/bg7w6jmh/61/

我添加了一个小提琴。注意：我需要箭头的额外容器，因为它在其他地方被动画（旋转）。目的是使小箭头平滑地向左移动3px并返回以指示target_element在点击或滑动时被动画化。对于值和缓动，请参阅关键帧。谢谢你的帮助！

Answer 1

现在好了。当我在我的小提琴上无休止地工作时，我发现我在活动宣言结束时错过了一个圆括号...

css关键帧过渡最好的方法

1 个答案: