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 作业
写回复
用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 我帮个好好瞅瞅?
tonyerxlink 2019-05-28
  • 打赏
  • 举报
回复
可以用保存matrix的值 设置完duration之后还原。只是需要js操作。
王者_来归 2019-05-28
  • 打赏
  • 举报
回复
引用 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加上之后,还是不行,每次都会回到原来的位置。
lllomh 2019-05-28
  • 打赏
  • 举报
回复
引用 2 楼 王者_来归 的回复:
[quote=引用 1 楼 lllomh 的回复:] 你好,加一个 animation-fill-mode: forwards; 就可以啦,停在最后一次的效果了,希望采纳
您好,非常感谢您的回复,我把animation-fill-mode的所有参数都试过了,不行的。[/quote] 你就是要 保持在最后的样子 可以的,你看看你得写 生效了没有

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧