为了账号安全,请及时绑定邮箱和手机立即绑定

如何用CSS3实现减速动画

如何用CSS3实现减速动画

慕虎7371278 2018-08-13 14:09:32
http://jiangshanmeta.github.io/demo/myWork/mobile/lottery/这是半成品的例子。我想做的是一个抽奖盘。开始抽奖后 给抽奖盘添加转动动画并且把动画次数设为infinite(因为不知道向后端请求等待拿到结果需要多少时间)。我本来想后端返回结果后改变动画次数并且改变动画持续时间来实现减速,并且监听animationend事件通过transform+transition显示最终抽奖结果。但是减速过于突兀。目前一个方案是接收到后台返回值之后,每转一圈增加一点animation-duration。求教有没有更好地解决方案。下面是关键帧@keyframes rotate {  from {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);       }  to {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);     } }
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 758 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号