css3动画问题

王者_来归 2019-05-28 09:58:26

各位大神，咨询大家一个css3动画的问题：
我使用rotateX旋转一个div，当动态改变animation-duration大小时，div会回到初始位置后再旋转，请教一下，如何在改变animation-duration时不让div回到初始位置？而是停留在改变前最后一次的位置上？

比如：我的最开始设置了animation-duration为10s，当这个div旋转了90度时，我把animation-duration设置成了15s，这时div会回到0度的位置再旋转，如何让这个div在90度的位置继续旋转？或者各位有什么更好的办法解决animation-duration改变的问题？

非常感谢！

...全文

175 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

王者_来归 2019-05-29

打赏
举报

还没有解决，大家继续。主要是我的css动画是在js中去拼接的，我前端采用的是Vue

王者_来归 2019-05-29

打赏
举报

难道没有人有过这样的应用吗？

王者_来归 2019-05-28

打赏
举报

引用 1 楼 lllomh 的回复:

你好，加一个 animation-fill-mode: forwards; 就可以啦，停在最后一次的效果了，希望采纳

您好，非常感谢您的回复，我把animation-fill-mode的所有参数都试过了，不行的。

lllomh 2019-05-28

打赏
举报

你好，加一个 animation-fill-mode: forwards; 就可以啦，停在最后一次的效果了，希望采纳

王者_来归 2019-05-28

打赏
举报

引用 6 楼 lllomh 的回复:

[quote=引用 4 楼王者_来归的回复:]
[quote=引用 3 楼 lllomh 的回复:]
[quote=引用 2 楼王者_来归的回复:]
[quote=引用 1 楼 lllomh 的回复:]
你好，加一个 animation-fill-mode: forwards; 就可以啦，停在最后一次的效果了，希望采纳

您好，非常感谢您的回复，我把animation-fill-mode的所有参数都试过了，不行的。[/quote]
你就是要保持在最后的样子可以的，你看看你得写生效了没有[/quote]
'animation: wheelDonwRotate ' + parseInt(1/newItem.downstream_speed + 10) + 's linear 2s infinite normal running forwards'
这是我写的动画代码，其中wheelDonwRotate是用@keyframes规定的动画，里面有一个from和to，分别为0度到360度旋转，newItem.downstream_speed这个是一个变量，会过几秒变一次，数值在0.01到0.2之间，forwards加上之后，还是不行，每次都会回到原来的位置。[/quote]要不加下QQ 我帮个好好瞅瞅？[/quote]
可以，感谢！
我QQ号码：2537438762

lllomh 2019-05-28

打赏
举报

引用 4 楼王者_来归的回复:

[quote=引用 3 楼 lllomh 的回复:] [quote=引用 2 楼王者_来归的回复:] [quote=引用 1 楼 lllomh 的回复:] 你好，加一个 animation-fill-mode: forwards; 就可以啦，停在最后一次的效果了，希望采纳

您好，非常感谢您的回复，我把animation-fill-mode的所有参数都试过了，不行的。[/quote] 你就是要保持在最后的样子可以的，你看看你得写生效了没有[/quote] 'animation: wheelDonwRotate ' + parseInt(1/newItem.downstream_speed + 10) + 's linear 2s infinite normal running forwards' 这是我写的动画代码，其中wheelDonwRotate是用@keyframes规定的动画，里面有一个from和to，分别为0度到360度旋转，newItem.downstream_speed这个是一个变量，会过几秒变一次，数值在0.01到0.2之间，forwards加上之后，还是不行，每次都会回到原来的位置。[/quote]要不加下QQ 我帮个好好瞅瞅？