首先来写这个 CSS3 动画
css3 旋转动画
- <view class='animationSlow'>
- </view>
- .animationSlow { width: 100rpx; height: 100rpx; background-color: orange;
- animation-name: myfirst; / 动画的名称 / animation-duration: 2000ms; / 动画从开始到结束的时间
- / animation-timing-function: linear; / 动画执行快慢的参数 /
animation-iteration-count: infinite; / 动画执行多少次的参数 // 以下是兼容 iOS 所需, 参数意义与上相同 /
- -webkit-animation-name: myfirst;
- -webkit-animation-duration: 2000ms;
- -webkit-animation-timing-function: linear;
- -webkit-animation-iteration-count: infinite;
- }
- @keyframes myfirst {
- / 开始转的角度 /
- from {
- transform: rotate(0deg);
- }/ 结束的角度 /
- to {
- transform: rotate(360deg);
- }
- }
- / 兼容 iOS/
- @-webkit-keyframes myfirst {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
来源: http://www.qdfuns.com/article/51116/247bb41d3c848a8d659179ce5c2aee3b.html