uni里面的使用css的动画-demo

uni中使用css原始的动画兼容

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。 阅读关于 initial的介绍。
inherit	从父元素继承属性。 阅读关于 initinherital的介绍。

如Uni中loading图片动画，按步旋转。或者线性旋转

        .zp-line-loading-image {
	 	margin-right: 8rpx;
	 	width: 150rpx;
	 	height: 150rpx;
		/* animation: loading-android-MP-2 1s 0s linear infinite; */
	 	animation: loading-flower 1s steps(8) infinite;
	 	color: #666666;
	 }
	
	.zp-r-left-image {
		transition-duration: .2s;
		transition-property: transform;
		color: #666666;
	}
	
	 @keyframes loading-flower {
	 	0% {
	 		-webkit-transform: rotate(0deg);
	 		transform: rotate(0deg);
	 	}
	 	to {
	 		-webkit-transform: rotate(1turn);
	 		transform: rotate(1turn);
	 	}
	 }