2017-04-08 108 views
-2

我正在使用一個小例子來演示CSS動畫。儘管顏色正在改變,但旋轉不被執行。請幫助解決它!CSS3動畫出現問題

<html> 
 
<head> 
 
<style> 
 
p{width:100px;height:100px;background:red;animation-name:peter;animation-duration:5s} 
 
@keyframes peter{ 
 
\t from{background:orange;} 
 
\t to{background:yellow;transform:rotate(180deg;)} 
 
}</style> 
 
</head> 
 
<body> 
 
<p>This is a paragraph.</p> 
 
</body> 
 
</html>

+0

沒有人可以這麼簡單的問題回答正確! ;( – Deadpool

+0

其中noob低估了我,可能是鴕鳥來的...... – Deadpool

回答

2

分號在(180deg;)放錯了地方,應該是括號外(180deg);

p { 
 
     width: 100px; 
 
     height: 100px; 
 
     background: red; 
 
     animation-name: peter; 
 
     animation-duration: 5s 
 
    } 
 
    
 
    @keyframes peter { 
 
     from { 
 
     background: orange; 
 
     } 
 
     to { 
 
     background: yellow; 
 
     transform: rotate(180deg); 
 
     } 
 
    }
<p>This is a paragraph.</p>

0

嘗試添加rotatefrom,也供應商前綴,以確保所有的瀏覽器回退。

from { 
background: orange; 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
-o-transform: rotate(0deg);   
transform: rotate(0deg); 
} 
to { 
background: yellow; 
-webkit-transform: rotate(180deg); 
-moz-transform: rotate(180deg); 
-o-transform: rotate(180deg); 
transform: rotate(180deg); 
} 
+0

發表小提琴,它不起作用。 – Deadpool