+- Twitist Forums (http://twitist.com)
+-- Forum: Twitter forums (/forum-1.html)
+--- Forum: Twitter General help (/forum-6.html)
+--- Thread: What is wrong with this CSS3 code, it won't animate in Google Chrome, why? (/thread-153513.html)
What is wrong with this CSS3 code, it won't animate in Google Chrome, why? - 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-animations/twitter-bird-sprite.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>