ERROR font-icon animation works ONLY in code-pen - css

Question

I have a code font-icon animation my problem is when i run in local server animation does'nt works it works only in http://codepen.io/TimPietrusky/pen/ELuiG
and even tried in
http://jsfiddle.net/qjo7cf3j/
#import url(http://weloveiconfonts.com/api/?family=maki);
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
background: #333;
}
[class*="maki-"]:before{
font-family: 'maki', sans-serif;
}
*:after {
position: absolute;
top: 0;
right: 0;
content: '';
z-index: -1;
width: 0;
height: 0;
}
[class*="maki-"] {
position: absolute;
margin: 0;
color: #fff;
font-size: 2em;
}
.wrapper {
height: 140%;
width: 120%;
transform: rotate(-3deg) translate(-10%, -15%);
}
.night {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
animation: night 45s infinite forwards;
}
#keyframes night {
0%, 30%, 100% {background:rgba(0, 0, 0, 0);}
55% {background: rgba(0, 0, 0, .6);}
}
.sky {
position: relative;
z-index: 0;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/bedge_grunge.png);
height: 50%;
width: 100%;
animation: rollin-bg 25s linear infinite forwards;
}
.ground {
position: absolute;
z-index: 1;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
height: 50%;
width: 100%;
animation: rollin-bg 7s linear infinite forwards;
}
#keyframes rollin-bg {
0% {background-position: 100%;}
100% {background-position: 0;}
}
.sun {
position: absolute;
z-index: 1;
left: 50%;
top: 10%;
width: 2em;
height: 2em;
font-size: 4em;
line-height: 1;
animation: circle 45s linear infinite;
transform-origin: 50% 3.85em;
}
.sun [class*="maki-"] {
color: rgba(240, 180, 0, .2);
text-shadow: 0 0 .35em rgba(240, 240, 0, .7);
}
.sun > div {
animation: inner-circle 45s linear infinite;
}
#keyframes circle {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#keyframes inner-circle {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
.maki-bicycle {
left: 50%;
z-index: 4;
margin: -.85em 0 0 -.5em;
color: rgba(30, 30, 140, .95);
}
.maki-tree-1[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 6;
animation: rollin 5s linear infinite;
font-size: 2.4em;
color: rgba(0, 110, 0, 1);
}
.maki-tree-1[data-child="2"] {
margin: -1em 0 0 85%;
z-index: 2;
animation: rollin 12s linear infinite;
font-size: 1.6em;
color: rgba(0, 110, 0, .5);
}
.maki-tree-1[data-child="3"] {
margin: -1em 0 0 25%;
z-index: 2;
animation: rollin 17s linear infinite;
font-size: 1.2em;
color: rgba(0, 110, 0, .3);
}
.maki-giraffe {
margin: .25em 0 0 5%;
z-index: 6;
animation: rollin 12s linear infinite reverse;
font-size: 10em;
color: rgba(255, 255, 10, .9);
}
.maki-giraffe:after {
right: -3em;
content: '\e82a \e82a \e82a \e82a \e82a';
font: .2em 'Maki', sans-serif;
letter-spacing: .2em;
width: 3em;
color: rgba(0, 0, 0, .6);
box-shadow:
0 .45em 0 .75em rgba(255, 255, 255, .4),
1em .35em 0 .75em rgba(255, 255, 255, .4),
2.25em .25em 0 1.05em rgba(255, 255, 255, .4)
;
border-radius: 50%;
transform: translate(2.3em, .55em) rotateY(-180deg);
}
.maki-grocery-store {
margin: -.35em 0 0 5%;
z-index: 5;
animation: rollin 22s linear infinite;
font-size: 4em;
color: rgba(220, 0, 10, .7);
}
.maki-commerical-building[data-child="1"] {
margin: -1em 0 0 5%;
z-index: 3;
animation: rollin 6s linear infinite;
font-size: 7em;
color: rgba(120, 0, 120, .8);
}
.maki-commerical-building[data-child="2"] {
margin: -1em 0 0 5%;
z-index: 2;
animation: rollin 14s linear infinite;
font-size: 4em;
color: rgba(0, 120, 120, .4);
}
.maki-heliport {
margin: -3.5em 0 0 2em;
z-index: 1;
color: rgba(30, 30, 30, .45);
font-size: 1.25em;
animation: rollin 26s linear infinite reverse 2s;
}
#keyframes rollin {
0% {margin-left:105%}
100% {margin-left:-15%;}
}
<div class="night"></div>
<div class="wrapper">
<div class="sun">
<div class="maki-fast-food"></div>
</div>
<div class="sky"></div>
<span class="maki-bicycle"></span>
<span class="maki-tree-1" data-child="1"></span>
<span class="maki-tree-1" data-child="2"></span>
<span class="maki-tree-1" data-child="3"></span>
<span class="maki-giraffe"></span>
<span class="maki-grocery-store"></span>
<span class="maki-commerical-building" data-child="1"></span>
<span class="maki-commerical-building" data-child="2"></span>
<span class="maki-heliport"></span>
<div class="ground"></div>
</div>

Answer 1

The reason why the animation doesn't work at all in your version, is because the animation properties need prefixes like -webkit- in some browsers.
In the CodePen, -prefix-free is used, which is why it works. It is a library that automatically adds the prefixed version of the CSS properties.
CodePen can also use Autoprefixer (another such library) or neither. Once you select 'neither', you'll see that the CodePen example also doesn't work anymore, because the (S)CSS doesn't contain the required prefixed version for the CSS attributes.
So, the solution: either use a library too, or add the required prefixed attributes for Chrome (and maybe other browsers too).
A similar issue (for a different set of properties) was asked for and answered here.