我为一个元素创建了这个动画指尖陀螺。
https://jsfiddle.net/e2tt2mao/450/
现在我只是使用 CSS 关键帧旋转对象。
但是我想知道如何让速度变化更随机?例如,它以较慢的速度旋转的时间与以较快的速度旋转的时间。
这是我想要的旋转动画类型的示例:https://68.media.tumblr.com/6b689487196da8bea9d540e203f7cd2e/tumblr_oqapg6uMXW1s5laego1_500.gif
@-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(360deg);}
}
最佳答案
一种可能性是嵌套多个容器,并为每个容器设置不同的动画 - 但您可以重复使用它们之间的关键帧。
玩转时间等等,你会得到不同的效果:
div {
display: inline-block;
}
.inner {
width: 200px;
height: 200px;
background-color: tomato;
}
.container {
margin: 30px;
animation: rotate 3s ease-in-out infinite;
}
.container2 {
animation: rotate 5s ease-in-out infinite;
}
.container3 {
animation: rotate 7s ease-in-out infinite;
animation-direction: alternate-reverse;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div class="container">
<div class="container2">
<div class="container3">
<div class="inner">
</div>
</div>
</div>
</div>
关于javascript - 如何让 "rotating animation"随机改变速度。指尖陀螺动画。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44389232/