CSS3 animation not running in Chrome on MY site - css

Question

I'm trying to animate an SVG with CSS3. You can see an example here -
http://codepen.io/MyXoToD/pen/vBlfs
However this example works exactly as it should in Chrome, however when I implement the code on my site, it doesn't run the code. Yet it works perfectly fine in Firefox. When i Inspect element in Chrome it's putting a line through the animation properties and displaying an error saying 'Invalid property value'. Yet when I look at the example I do the same thing and I don't get the same error.
I'm a little confused and I've been debugging this for a while. It can't be my version of Chrome (which is Version 39.0.2171.95 m).
Although my code is almost exactly the same after some small modifications, here is my snippet:
img {
max-width: 80%;
width: 100%;
//position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
animation-name: show;
animation-delay: 6s;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
svg {
max-width: 80%;
width: 100%;
//position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
path {
stroke-width: 2;
stroke: black;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: draw;
animation-timing-function: linear;
animation-duration: 3s;
&.bird {
stroke: black;
stroke-dasharray: 2810;
stroke-dashoffset: 2810;
}
}
}
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
#keyframes show {
to {
opacity: 1;
}
}

Answer 1

You've enabled the -prefix-free mode on Codepen. It lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
For example, on Codepen you will see:
animation-name: show;
instead of:
animation-name: show;
-webkit-animation-name: show;
-moz-animation-name: show;