.logosprite {
  transform: scale(.4);
  width: 800px;
  height: 600px;
  background: url('../assets/img/logosprite.png')   no-repeat;
  animation:fadeIn .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeIn .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;
}

.logosprite:hover {
  animation:fadeOut .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeOut .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;

}

.bug {
  
  width: 800px;
  height: 600px;
  background: url('../assets/img/logosprite.png')   no-repeat;
  animation:fadeIn .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeIn .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;
}

.bug:hover {
  animation:fadeOut .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeOut .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;

}

.bug2 {
  
  width: 800px;
  height: 600px;
  background: url('../assets/img/logosprite.png')   no-repeat;
  animation:fadeIn .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeIn .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;
}

.bug2:hover {
  animation:fadeOut .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeOut .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;

}

.bug3 {
  
  width: 800px;
  height: 600px;
  background: url('../assets/img/logosprite2.png')   no-repeat;
  animation:fadeIn .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeIn .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;
}

.bug3:hover {
  animation:fadeOut .3s steps(17);
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;

  -webkit-  animation:fadeOut .3s steps(17);
  -webkit-  animation-iteration-count: 1;
  -webkit-  animation-play-state: running;
  -webkit-  animation-fill-mode: forwards;

}


@-webkit-keyframes fadeOut {
from {background-position: 0px;}
to { background-position:   -13600;}
}



@-webkit-keyframes fadeIn {

from {background-position: -13600px;}
to { background-position:   0px;}
}



@keyframes fadeOut {
from {background-position: 0px;}
to { background-position:   -13600px;}
}

@keyframes fadeIn {
from {background-position: -13600px;;}
to { background-position:   0px;}
}