我正在尝试创建一个动画钟摆。我设法用两个嵌套的 div 来做到这一点,一个用于字符串,一个用于钟摆。动画是通过将字符串从 45 度旋转来完成的,如下所示:
.string{
-webkit-animation-name: rotate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-webkit-transform-origin:50% 0%;
}
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(45deg); }
50% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}
它工作正常,但速度的印象不是很好。
现在我希望钟摆的速度从 到 减小,从0deg
到45deg
增加。45deg
0deg
我怎么能做到这一点?