同时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动画和自旋转换

那你究竟由*连续纺丝过渡意味着*？ – 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

同时CSS动画和自旋转换

相关推荐