Animations wont run - css

Question

I'm trying to run some animations in scss and I'm running into difficulty. In chrome dev tools it shows my element has the correct animation set and I've even copy pasted the keyframes rule into codepen and tried it there and it worked, yet when I run it in my website it doesn't work. I've been stuck with this for hours.
Here is a fiddle demonstraiting: http://jsfiddle.net/58xrZ/1/
This was written in Scss and HAML and is as follows
ul.tab-selection {
width: 38.338926174%;
float: right;
position: relative;
min-height: 20em;
li {
text-align: center;
height: 6em;
width: 6em;
border-radius: 50%;
position: absolute;
&:first-child {
background : radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(98, 78, 44, 1) 0%, rgba(98, 78, 44, 0.66) 85.3%, rgba(98, 78, 44, 0.6) 100%);
top: 0;
right: 50%;
margin-right: -50px;
animation-name: first;
animation-duration: 3s;
-webkit-animation-name: first;
-webkit-animation-duration: 3s;
a {
width: 4em;
padding: 2em 1em
}
}
&:not(:first-child){
bottom: 1.5em;
}
&:nth-child(2) {
background: radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
background: -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
background: -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(121, 85, 48, 1) 0%, rgba(121, 85, 48, 0.66) 85.3%, rgba(121, 85, 48, 0.6) 100%);
filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
}
&:last-child {
background : radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
background : -moz-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
background : -webkit-radial-gradient(50% 50%, circle farthest-corner, rgba(111, 68, 44, 1) 0%, rgba(111, 68, 44, 0.66) 85.3%, rgba(111, 68, 44, 0.6) 100%);
filter: progid:DXImageTransform.Microsoft.Alpha(Stlye=2);
right: 0;
a {
left: 3px;
padding: 2em 1em;
}
}
a {
position: absolute;
right: 0;
left: 0;
top: 0;
font-family: 'Lora', serif;
color: #AE843D;
text-shadow: 0 -1px 0 black;
padding: 1.5em 1em;
&:hover {
color: #3D6F51;
}
}
}
}
and in Haml
%ul.tab-selection
%li.active.current-projects
%a{ :href => '#current-projects', 'data-toggle' => 'tab' }
Current
%br Projects
%li.secret
%a{ :href => '#secret', 'data-toggle' => 'tab' }
The
%br
Secret Shop
%li.favorite
%a{ :href => '#favorite', 'data-toggle' => 'tab' }
Favorite
%br Links

Answer 1

You need to place the keyframes at the bottom of your CSS. You also need to have browser prefixed versions of the #keyframes animation(s) so that when you say -webkit-animation:... for example it will actually go to the #-webkit-keyframes
Demo
It likely only worked in CodePen because it was using a prefixer, which automatically adds prefixes