Question

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

Answer 1

你应该添加和定义另一个动画，也许是这样的：

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

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

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

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

2.5s我选择这个来完成第一个动画的一次完整旋转，我觉得它看起来更顺畅。
linear让你感受到无尽的旋转感。如果您不想要这种效果，请尝试其他功能。
我没有放alternate因为我们希望元素连续旋转。

Demonstration

同步CSS动画和旋转过渡

1 个答案: