jquery - CSS3 动画/转换在 Chrome 中不起作用

Question

我正在使用 Jquery 和 CSS3 为几个元素设置动画(调用 + 向我们发送消息按钮)，让它们在可见时淡入和向上。

动画在 IE10+ 上运行良好，但在 Chrome 上运行不正常。当我在开发人员控制台中检查元素时，Jquery 似乎也正确地添加了样式。

这是 CSS:

.come-in {
   -webkit-transform: translateY(150px);
   transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
  -webkit-animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
}
.already-visible {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  animation: none;
  -webkit-animation: none;
}
@keyframes come-in {
  to { transform: translateY(0); 
       -webkit-transform: translateY(0); 
  }
}

Jquery:

$.fn.visible = function(partial) {

    var $t            = $(this),
        $w            = $(window),
        viewTop       = $w.scrollTop(),
        viewBottom    = viewTop + $w.height(),
        _top          = $t.offset().top,
        _bottom       = _top + $t.height(),
        compareTop    = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

(jQuery);


$(window).scroll(function(event) {

    $(".button").each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in"); 
        } 
    });

});

以及相关的 HTML:

 <div class="columns five button">
    <h2 class="no-margin padding-small"><img src="images/phone16.png" alt=""/>Call 128 3778 9237</h2>
    <div class="clear"><!-- ClearFix --></div>
</div>
<div class="columns five center button">
    <h2 class="no-margin padding-small"><img src="images/chat81.png" alt="" />Send us a message</h2>
    <div class="clear"><!-- ClearFix --></div>
</div>

Answer 1

添加这个:

@-webkit-keyframes come-in {
  to { transform: translateY(0); 
       -webkit-transform: translateY(0); 
  }
}

它将是 supported在 Chrome 40 中没有前缀。