使用translateX＆amp ;;将div水平移动到屏幕中jquery的addClass

Question

假设我有一个div，我想在加载后立即进入网站。为此，我想使用CSS3＆amp; Jquery的。

我有以下html

<div class="headline-box">
</div>

使用以下CSS（SASS）：

.headline-box {
 //some other stuff here

transition: transform 600ms ease;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);

  .visible {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
}

在jquery中我执行以下操作：

$(document).ready(function(){

 setTimeout(function() {
    $('.headline-box').addClass('visible');
 }, 1000);

});

还有一些事情：

• {1}}在1秒后注入HTML，因此效果正常
• 当我将.visible class替换为.visible（仅用于测试）然后悬停元素时，转换工作正常。只有当我用&:hover替换它才能添加带有jquery的类时它不起作用