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);
}
}
如何用CSS3實現減速動畫
慕虎7371278
2018-08-13 14:09:32