keyframes using bourbon does not work in webkit browsers

Question

I am trying to create a scroll down indicator.
I am using bourbon mixin library (http://bourbon.io/) with scss in my project.
It does work as intended and bouncy in firefox and IE. However, in every other browser (webkit) it does not. Why?

Here is the code:
HTML

<div class="arrow animated bounce"></div>

CSS

/* Scroll down indicator (bouncing) */
@include keyframes(bounce) {
    0%, 20%, 50%, 80%, 100% {
    @include transform(translateY(0));
    }
    40% {
    @include transform(translateY(-30px));
    }
    60% {
    @include transform(translateY(-15px));
    }
}

.arrow {
    position: absolute;
    top: 94%;
    left: 0;
    width: 50px;
    height: 50px;
    background-image: url('/imgs/arrow.svg');
}

.bounce {
    animation: bounce 2s infinite;
}

The outputted CSS:

/* Scroll down indicator (bouncing) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px); } }
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0); }
  40% {
    -moz-transform: translateY(-30px); }
  60% {
    -moz-transform: translateY(-15px); } }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); } }

I am very thankful for any kind of help!

Answer 1

It's because Webkit requires a prefix on the animation property in your .bounce class

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

JSfiddle Demo

Answer 2

Or maybe you could just use @include animation(bounce 2s infinite);

Answer 3

For things to work with Bourbon as expected you need to use both animation() and keyframes() like so:

.myclass {
    @include keyframes(myAnimation) {
        from { background-position:  0px  0px;}
        to   { backgorund-position: 10px 10px; }
    }

    @include animation(myAnimation 10s linear infinite);
}

That'll output properly prefixed CSS and things will work as expected in newer browsers.