CSS Hat effects

#header .light_1 {
     background-image: url('../img/header_light.png');
     -webkit-animation: hat-glow-effect-1 40s ease-in-out infinite;
}
#header .light_2 {
     background-image: url('../img/header_light_2.png');
     -webkit-animation: hat-glow-effect-2 40s ease-in-out infinite;
}
#header .light_3 {
     background-image: url('../img/header_light_3.png');
     -webkit-animation: hat-glow-effect-3 40s ease-in-out infinite;
}
#header .light_4 {
     background-image: url('../img/header_light_4.png');
     -webkit-animation: hat-glow-effect-4 40s ease-in-out infinite;
}
#header .light_5 {
     background-image: url('../img/header_light_5.png');
     -webkit-animation: hat-glow-effect-5 40s ease-in-out infinite;
}
#header .icons {
     -webkit-animation: levitate 4s ease-in-out infinite alternate both;
}


/* @Animations */

@-webkit-keyframes hat-glow-effect-1 {
  0% {
    -webkit-transform: scale(1.02) translate3d(0, -1px, 0);
    opacity: 1;
  }
  15%, 85%  {
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.02) translate3d(0, -1px, 0);
    opacity: 1;
  }
}

@-webkit-keyframes hat-glow-effect-2 {
  0%, 5%, 35%, 100% {
    opacity: 0;
  }
  20% {
    -webkit-transform: scale(1.02) translate3d(0, -1px, 0);
    opacity: 1;
  }
}

@-webkit-keyframes hat-glow-effect-3 {
  0%, 25%, 55%, 100% {
    opacity: 0;
  }
  40% {
    -webkit-transform: scale(1.02) translate3d(0, -1px, 0);
    opacity: 1;
  }
}

@-webkit-keyframes hat-glow-effect-4 {
  0%, 45%, 75%, 100% {
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.02) translate3d(0, -1px, 0);
    opacity: 1;
  }
}

@-webkit-keyframes hat-glow-effect-5 {
  0%, 65%, 95%, 100% { /* ==100% */
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(1.02) translate3d(0, -1px, 0);
    opacity: 1;
  }
}



@-webkit-keyframes levitate {
  0% {
    -webkit-transform: translate3d(0, -18px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 18px, 0);
  }
}