<div class="america"></div>
.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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.