CSS3 animation/transform not working in Chrome

Question

I am using Jquery and CSS3 to animate a couple of elements (call + send us a message button), having them fade-in and upwards when they become visible.

The animation works fine on IE10+, but doesn't on Chrome. The Jquery also seems to add the styles correctly when I inspect the element in the developer console.

Here is the 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); 
  }
}

The 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"); 
        } 
    });

});

And the relevant 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

Add this:

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

It will be supported without prefix in Chrome 40.