如何用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);  
  }
}