嗨，我無法獲得CSS旋轉動畫的工作？使用最新版本。更新：在Chrome上運行

我似乎無法像我想要的那樣讓圖像旋轉。我相信圖像類有問題，但我一直在嘗試並且無法制作動畫功能。嗨，我無法獲得CSS旋轉動畫的工作？使用最新版本。更新：在Chrome上運行

這是我的代碼的一部分。我只包含這是相關的問題代碼：

img: hover { 
 
cursor: default; 
 
transform: rotate(360deg); 
 
transition: all 0.3s ease-in-out 0s; 
 
} 
 

 
img: nth-child (1) { 
 
animation-name: spin; 
 
animation-duration: 4s; 
 
animation-iteration-count: 3; 
 
} 
 

 
@keyframes spin { 
 
from {transform: rotate(0deg); 
 
} 
 
to {transform: rotate(360deg); 
 
}} 
 

 
</style> 
 

 
<body> 
 
<header>My Tutorial 3</header> 
 
<img class = "as" src="as.png" /> 
 
<article><header>About this tutorial</header> 
 
In this tutorial I need to make a picture spin for ever... 
 
<img src="a2.png" /></article> 
 
<footer>my footer 
 
<img src="a3.png" /></footer> 
 
<div class="ribbon"><a href="#">My Tutorial 3</a></div> 
 

 
</body> 
 
</html>

來源

2015-10-24 IOS Programmer

你使用什麼瀏覽器？您可能需要以webkit開頭：http://stackoverflow.com/a/23695194/4018167 –

另外，僞選擇器不應該在它們的前面有空格（'img：hover'應該是'img：hover'） –

使用Chrome瀏覽器。我現在刪除了空格。 –

你來源相當破碎。嘗試這樣的：

<style type="text/css"> 
img:hover { 
    transform: rotate(360deg); 
    transition: all 0.3s ease-in-out 0s; 
} 

#spin { 
    animation-name: spin; 
    animation-duration: 4s; 
    animation-iteration-count: 3; 
} 

@keyframes spin { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 
} 
</style> 
<p><img src="spin.png" id="spin"></p> 
<p><img src="spin.jpg"></p>

id =「spin」的img獲取動畫，而另一個只在懸停時翻轉。小心使用第n種！除了Firefox之外，對此沒有什麼支持。

來源

2015-10-24 01:48:21

嗨，你知道我需要什麼才能使圖像旋轉1，而不使用「class」或「id」？ –

這是不可能的。 CSS動畫不能這樣工作。 –