@-webkit-keyframes horizontal {
  0% { width: 0 }
  50% { width: 100% } 
  100% { width: 0 }
}
@keyframes horizantal {
  0% { width: 0 }
  50% { width: 100% }
  100% { width: 0 }
}
@-webkit-keyframes vertical {
  0% { height: 0 }
  50% { height: 100% }
  100% { height: 0 }
}
@keyframes vertical {
  0% { height: 0 }
  50% { height: 100% }
  100% { height: 0 }
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  opacity: 0;
  -webkit-animation: appear 8s linear infinite;
          animation: appear 8s linear infinite;
}
.i2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.i3 {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.i4 {
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
}

@-webkit-keyframes appear {
  10% {
    opacity: 1
  }
  100% {
    opacity: 0;
    background-position: right;
    zoom: 100%;
  }
}
@keyframes appear {
  10% {
    opacity: 1
  }
  30% {
    opacity: 0;
    background-position: right;
    zoom: 100%;
  }
}