keyframes using bourbon does not work in webkit browsers - css

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.