css - Firefox Not Showing CSS3 Animations -
what's wrong (in firefox)? in chrome, works smoothly (except small backflip wheni reaches position. doing wrong?
keyframes:
@keyframes "grow" { { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } { -webkit-transform: scale(2) rotate(180deg); -moz-transform: scale(2) rotate(180deg); -o-transform: scale(2) rotate(180deg); -ms-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); } } @-moz-keyframes grow { { -moz-transform: scale(1); transform: scale(1); } { -moz-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); } } @-webkit-keyframes "grow" { { -webkit-transform: scale(1); transform: scale(1); } { -webkit-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); } } @-ms-keyframes "grow" { { -ms-transform: scale(1); transform: scale(1); } { -ms-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); } } @-o-keyframes "grow" { { -o-transform: scale(1); transform: scale(1); } { -o-transform: scale(2) rotate(180deg); transform: scale(2) rotate(180deg); } } @keyframes "spin" { { -webkit-transform: scale(2) rotate(0deg); -moz-transform: scale(2) rotate(0deg); -o-transform: scale(2) rotate(0deg); -ms-transform: scale(2) rotate(0deg); transform: scale(2) rotate(0deg); } { -webkit-transform: scale(2) rotate(360deg); -moz-transform: scale(2) rotate(360deg); -o-transform: scale(2) rotate(360deg); -ms-transform: scale(2) rotate(360deg); transform: scale(2) rotate(360deg); } } @-moz-keyframes spin { { -moz-transform: scale(2) rotate(0deg); transform: scale(2) rotate(0deg); } { -moz-transform: scale(2) rotate(360deg); transform: scale(2) rotate(360deg); } } @-webkit-keyframes "spin" { { -webkit-transform: scale(2) rotate(0deg); transform: scale(2) rotate(0deg); } { -webkit-transform: scale(2) rotate(360deg); transform: scale(2) rotate(360deg); } } @-ms-keyframes "spin" { { -ms-transform: scale(2) rotate(0deg); transform: scale(2) rotate(0deg); } { -ms-transform: scale(2) rotate(360deg); transform: scale(2) rotate(360deg); } } @-o-keyframes "spin" { { -o-transform: scale(2) rotate(0deg); transform: scale(2) rotate(0deg); } { -o-transform: scale(2) rotate(360deg); transform: scale(2) rotate(360deg); } } i applied specific elements:
.radial_div_item img:hover { -webkit-animation: spin 1s infinite linear, grow .5s 1 linear; -moz-animation: spin 1s infinite linear, grow .5s 1 linear; -ms-animation: spin 1s infinite linear, grow .5s 1 linear; -o-animation: spin 1s infinite linear, grow .5s 1 linear; animation: spin 1s infinite linear, grow .5s 1 linear; } html icons:
<div class="radial_div" style="position: relative"> <div class="radial_div_item" style="position: absolute; left: 155px; top: -5px;"><a href="http://www.facebook.com/terrasoftcorporation"><img src="img/menu/fb.png" title="like on facebook!" width="48" /></a></div> <div class="radial_div_item" style="position: absolute; left: 315px; top: 85px;"><a href="http://www.twitter.com/terrasoftlabs"><img src="img/menu/twit.png" title="follow on twitter!" width="48" /></a></div> <div class="radial_div_item" style="position: absolute; left: 315px; top: 280px;"><a href="http://gplus.to/tsoft"><img src="img/menu/plus.png" title="add on google+!" width="48" /></a></div> <div class="radial_div_item" style="position: absolute; left: 155px; top: 370px;"><a href="http://prj.terrasoft.x10.mx"><img src="img/menu/prj.png" title="our project directory!" width="48" /></a></div> <div class="radial_div_item" style="position: absolute; left: -15px; top: 280px;"><a href="#contact" target="_self"><img id="contactopener" src="img/menu/mail.png" title="contact us!" width="48" /></a></div> <div class="radial_div_item" style="position: absolute; left: -27px; top: 75px;"><a href="https://github.com/gabrielnahmias/"><img src="img/menu/hub.png" title="check out our github!" width="72" /></a></div> </div> any ideas?
css3 animations supported in mozilla 16 or higher.so recommend reconsider mozilla version.
also don't know please code
@-moz-keyframes grow should rather @-moz-keyframes "grow".you missed out "".hope works out you.
Comments
Post a Comment