<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 声明并创建另一个选择器，但这些似乎都不起作用。
最佳答案
你应该添加和定义另一个动画，也许像这样:
@keyframes rotate
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
然后将动画添加到您的元素中，用逗号分隔:
animation:myfirst 5s infinite alternate, rotate 2.5s linear infinite;
在此示例中，请注意以下事项:
2.5s我选择这个是为了在你的第一个动画中一次完成两个完整的旋转，我觉得它看起来更流畅。linear给你在虚空中无尽旋转的感觉。不想要这个效果可以试试其他功能。我没有放置
alternate，因为我们希望元素连续旋转。
关于css - 同步 CSS 动画和旋转过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15442653/