如何用CSS3实现减速动画

Question

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);  
  }
}

Answer 1

全程使用transition，然后根据服务端返回值动态计算transform的角度，避免两个动画衔接。

transition: all 3s ease;

var result=Math.floor(Math.random() * 7) + 1; //如果没有返回数据给result赋个没有奖的默认值。
var angular=1080+Math.floor(result*45*(Math.random()));
指针.style.transform= "rotate("+ angular +"deg)"

你怕服务端返回慢可以让 mouseup 事件就触发 ajax。事实上动态改变 @keyframes 也是可以实现的，但是要麻烦许多。