I followed the explanations on this jsFiddle page http://jsfiddle.net/gionaf/Ugc5g/ to spin an image on my page http://www.prezzio.net/ but it does not work: the image is not spinning.
To be clear, here is the image to spin:
Here is the original code:
.spin { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="spin" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
Any idea ? Thanks.
Try this, here is Demo
with all Vendor prefixes
img { animation: 2s spin infinite linear; } @keyframes spin { to {transform: rotate(360deg);} }
<img src="http://www.prezzio.net/files/theme/spin.png" alt="">
The culprit lies in your main_style.css
line 369
.
Add these lines,
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
And it should spin as you expect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.