css 关键帧过渡的最佳方式

Question

现在我正在使用 Rico St.Cruz 出色的工作 query.transit 库，但现在我必须改变一些与 classes 相关的东西，尽管在 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) 达到此目的的最短代码（浏览器兼容）是什么？

补充：我想保留 "hint" class 通过 JS 处理的通用性，每个箭头都有一个特定的自己的翻译属性。提前致谢！

编辑：

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

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

Answer 1

现在正好好了。当我在 fiddle 上没完没了地工作时，我意识到我在事件声明的末尾漏掉了一个圆括号……

css 关键帧过渡的最佳方式

css keyframe transition best way to do

html

javascript

css

jquery