icon fonts - animation

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<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"></span>
    <span class="maki-tree-1"></span>
    <span class="maki-tree-1"></span>
    
    <span class="maki-giraffe"></span>

    <span class="maki-grocery-store"></span>
    
    <span class="maki-commerical-building"></span>
    <span class="maki-commerical-building"></span>
    
    <span class="maki-heliport"></span>
   
    <div class="ground"></div>
</div>

CSS

@import url(http://weloveiconfonts.com/api/?family=maki);

html,
body {
 height:100%;
 width:100%;    
 overflow:hidden;
 background:#333;
}

.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% 4.15em;
    
}

.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 */
[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-"] {
  margin:0;  
  color:#fff;
  font-size:2em;
  position:absolute;
}

.maki-bicycle {
  left:50%;
  margin:-.85em 0 0 -.5em;  
  z-index:2;
  color:rgba(30, 30, 140,...