css制作uni-app旋转动画及旋转暂停/开始

css用animation可以制作旋转动画

uni-app例子：

<template>
	<view>
		<view  class="cen Music" :style="pause?'':'animation-play-state: paused;'">
		  <image style="width: 200rpx;height: 200rpx;border-radius: 50%" :src="img">
		  </image>
		</view>
       <view style="display: flex;">
			<button style="width: 200rpx;height: 100rpx;" @click="pause=true">开始                           
            </button>
			<button style="width: 200rpx;height: 100rpx;" @click="pause=false">停止
            </button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pause: false,
				img: '../../static/pic/10.jpg'  //随便放入一个图片
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.Music {
		width: 250rpx;
		height: 250rpx;
		border-radius: 50%;
		background-color: #000000;
		
		animation: name 15s infinite linear; /* 定义旋转动画name，15s表示旋转动画持续时间 infinite表示匀速旋转，linear表示无限循环*/
	}
	.cen {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	@keyframes name{/* 制作旋转动画旋转方式 */
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>

例子中制作旋转动画的关键部分是 ：

.Music{
    animation: name 15s infinite linear;    /* 定义旋转动画name，15s表示旋转动画持续时间 infinite表示匀速旋转，linear表示无限循环*/
}

@keyframes name{
		0% {
			transform: rotate(0deg); 
		}
		100% {
			transform: rotate(360deg);
		}
	}

暂停/开始旋转动画是通过：animation-play-state: paused;来控制暂停的，设置animation后默认是有旋转动画的，所以没有写开始旋转的代码（animation-play-state: running;表示开始旋转动画），通过   :style="pause?'':'animation-play-state: paused;'"当pause为true时将暂停动画的css样式添加进去停止旋转，pause为false时则不添加停止动画正常旋转