CSS关键帧过渡的最佳方法

css keyframe transition best way to do

本文关键字：最佳 方法 关键帧 CSS      更新时间：2023-09-26

现在我正在使用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在单击或滑动时正在动画化。有关值和缓动，请参阅关键帧。感谢您的帮助！

现在碰巧没事了。当我无休止地练习小提琴时，我意识到我在活动声明结束时错过了一个圆括号......

相关文章：