.america {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(http://news.christopherlisle.com/wp-content/uploads/2016/08/flag_text1.png) repeat;
  background-position: 0 0;
  cursor: pointer;
  animation: fave-america 1s steps(42);
}
.america:hover {
  background-position: -4200px 0;
  transition: background 1s steps(42);
}
@keyframes fave-america {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -4200px 0;
  }
}