小白求助，为什么不用hover，我的就只能移动不能旋转？

Question

*{
padding:0;
margin:0;
}
#container1
{
width:800px;
height:700px;
}
#showing1
{
width:200px;
height:150px;
float:right;
position:relative;
top:550px;
background:#F36;
border-radius:10px;
transition:all 5s ease-in-out;
transform:rotate(720deg) scale(2,2);
animation:mylasting1;
animation-delay:2s;
animation-duration:5s;
animation-play-state:running;
animation-fill-mode:forwards;
/* Safari and Chrome: */
-webkit-border-radius:10px;
-webkit-transition:all 5s ease-in-out
-webkit-transform:rotate(720deg) scale(2,2);
-webkit-animation:mylasting1;
-webkit-animation-delay:2s;
-webkit-animation-duration:5s;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
}
@keyframes mylasting1
{
0%{top:550px;}
25%{top:250px;left:100px;}
50%{top:150px;left:50px;}
100%{top:0px;left:0px;}
}
@-webkit-keyframes mylasting1
{
0%{top:550px;}
25%{top:250px;left:100px;}
50%{top:150px;left:50px;}
100%{top:0px;left:0px;}
}

<div id="container1">
<div id="showing1">
</div>
</div>

• 
  

Answer 1

你的代码里面只有位置移动的top,left。没有写旋转的代码。在动画帧时加入rotate(角度)就可以旋转并移动，可以参考下面代码。相关示例如下：<style>.ani{animation:box&nbsp;1s&nbsp;linear&nbsp;0s&nbsp;infinite;width:100px;height:100px;background:green;border-radius:50%;}@keyframes&nbsp;box{0%&nbsp;&nbsp;&nbsp;{transform:rotate(0deg)translate(0,0);}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)translate(-300px,0);}75%{transform:rotate(270deg);}100%&nbsp;{transform:rotate(360deg)translate(0,0);}}</style><div&nbsp;class="ani"></div>CSS（层叠样式表）级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

Answer 2

你在这里面也没设置让他旋转的代码,肯定不会旋转的就是这句：-webkit-transform:rotate(720deg) scale(2,2);@keyframes mylasting1{0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2); transform:rotate(720deg) scale(2,2);}25%{top:250px;left:100px; -webkit-transform:rotate(80deg) scale(2,2); transform:rotate(720deg) scale(2,2);}50%{top:150px;left:50px; -webkit-transform:rotate(160deg) scale(2,2); transform:rotate(720deg) scale(2,2);}100%{top:0px;left:0px; -webkit-transform:rotate(320deg) scale(2,2); transform:rotate(720deg) scale(2,2);}}@-webkit-keyframes mylasting1{0%{top:550px; -webkit-transform:rotate(10deg) scale(2,2);}25%{top:250px;left:100px; -webkit-transform:rotate(80deg) scale(2,2);}50%{top:150px;left:50px; -webkit-transform:rotate(160deg) scale(2,2);}100%{top:0px;left:0px; -webkit-transform:rotate(320deg) scale(2,2);}}

Answer 3

@keyframes mylasting1{0%{top:550px;}25%{top:250px;left:100px;}50%{top:150px;left:50px;}100%{top:0px;left:0px;transform:rotate(720deg) scale(2,2);}}