1 
<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 声明并创建另一个选择器，但这些似乎都不起作用。

4

1 回答 1

2

您应该添加并定义另一个动画，可能像这样：

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

然后将动画添加到您的元素中，用逗号分隔：

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

在此示例中，请注意以下事项：

  1. 2.5s我选择这个是为了在你的第一个动画中一次性完成两个完整的旋转，我认为它看起来更平滑。

  2. linear给你在虚空中无尽旋转的感觉。如果您不想要这种效果，请尝试其他功能。

  3. 我没有放alternate是因为我们希望元素连续旋转。

Demonstration

于 2013-03-15T22:12:16.587 回答