同時CSS動畫和自旋轉換

<style> 
div 
{ 
width:50px; 
height:100px; 
background:red; 
position:relative; 
animation:myfirst 5s infinite alternate; 
-webkit-animation:myfirst 5s infinite alternate; 
} 

@keyframes myfirst 
{ 
0% { left:0px; top:0px;} 
25% { left:200px; top:0px;} 
50% { left:200px; top:200px;} 
75% { left:0px; top:200px;} 
100% { left:0px; top:0px;} 
} 


@-webkit-keyframes myfirst 
{ 
0% { left:0px; top:0px;} 
25% { left:200px; top:0px;} 
50% { left:200px; top:200px;} 
75% { left:0px; top:200px;} 
100% { left:0px; top:0px;} 
} 


</style> 


<body> 

<div></div> 

</body>

是否有可能增加一些不大不小的旋轉過渡到這一點？我已經嘗試將代碼添加到div聲明並創建另一個選擇器，這些都沒有工作。同時CSS動畫和自旋轉換

來源

2013-03-15 user2121482

那你究竟由*連續紡絲過渡意味着*？ – Sunyatasattva 2013-03-15 21:56:35

對不起，我說錯了。基本上，盒子無限旋轉360度。 – user2121482 2013-03-15 21:58:52

像[this]（http://jsbin.com/isinel/1）？ – Sunyatasattva 2013-03-15 22:02:10

您應該添加和定義另一個動畫，也許像這樣：

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

然後動畫添加到您的元素，用逗號分隔它：

animation:myfirst 5s infinite alternate, rotate 2.5s linear infinite;

在這個例子中注意以下東西：

2.5s我選擇了這個做兩個完整的ro在第一部動畫中，我認爲它看起來更平滑。
linear給你無盡的旋轉的感覺。嘗試其他功能，如果你不想要這個效果。
我沒有把alternate，因爲我們想要元素連續旋轉。

Demonstration

來源

2013-03-15 22:12:16 Sunyatasattva

同時CSS動畫和自旋轉換

回答

相關問題