Threaded Mode | Linear Mode

Arquitect82 · 05-05-2014, 08:37 AM

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.twitter-bird {
background-image: url

(http://minimalmonkey.com/lab/css3-

animations/twitter-bird-sprite.png);
display: inline-block;
height: 150px;
width: 150px;
}

.twitter-bird:hover {
animation: fly 0.2s steps(3) 0

infinite;
}

@keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0;

}
}
</style>

</head>

<body>
<div class="twitter-bird">
</div>

</body>

</html>

Karthik Devaraj · 05-05-2014, 08:49 AM

For Google Chrome, need to specify "-webkit-" as prefix for both keyframes and animations. It does not support in Firefox also. because you are using background-position when hovering the twitter-bird.

Try this code:
<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.twitter-bird {
background-image:url(http://minimalmonkey.com/lab/css3-animat...rite.png);
display: inline-block;
height: 150px;
width: 150px;
}

@keyframes fly {
from { background-position: 0 0; } to { background-position: -450px 0;} }

@-webkit-keyframes fly {
from { background-position: 0 0; } to { background-position: -450px 0;} }

.twitter-bird:hover {
animation: fly 0.2s steps(3) 0 infinite;
-webkit-animation: fly 0.2s steps(3) 0 infinite;
}

</style>

</head>

<body>
<div class="twitter-bird">
</div>

</body>

</html>