利用css创建动画

首先需要了解以下三个css属性

(一)@keyframes创建动画规则

@keyframes创建动画规则，可以用以下两种来表示动画的开头语完成
(1)_0%_是动画开头，_100%_是动画完成
(2)from (和0%相同)， to (和100%相同)

(二)transform设置位置

(1) translate3d(x,y,z)定义3D转化，可以用来创建动画的起始终点位置
(2) rotate(0deg)定义角度大小

(三)animation设置动画

animation是一个简写属性，包含以下几个内容：

1. animation-name 动画名称
2. animation-duration 动画时长
3. animation-timing-function速度曲线
   linear:匀速；ease：低速-加快-低速；ease-in：低速开始；ease-out：低速结束；ease-in-out：低速开始和结束；cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。（可能的值是从 0 到 1 的数值。）
4. animation-delay动画启动前的延迟
5. animation-iteration-count动画次数
6. animation-direction规定是否应该轮流反向播放动画。

实例

自动滚动（从下到上匀速运动）

// html
	<view class="box">
			<view class="rolling">
				<view class="width33">文本</view>
				<view class="width33">文本</view>
				<view class="width33">文本</view>
				<view class="width33">文本</view>
				<view class="width33">文本</view>
			</view>
		</view>

// css
/* 设置盒子样式 */
 .box{
		position: relative;
		height: 100rpx;
		width:200rpx;
		overflow: hidden;
		background-color: #007AFF;
		
	}
	/* 设置动画起始位置y坐标从0到-100px */
 @keyframes rolling {
	   0% {
	     transform: translate3d(0, 0, 0);
	      }
	   100% {
	      transform: translate3d(0, -100px, 0);
	         }
	              }

	/* 动画时长 动画名 动画曲线等样式 */
.box .rolling {
	 animation: 10s rolling linear infinite normal;
	position: relative;
	}
	/* 注意class名与animation名必须一致*/

360度旋转（可用于刷新加载的样式）

// html
	<view class="refresh">
			<image src="@/static/refresh.png" mode=""></image>
		</view>

// css
	
.refresh image {
		height: 56rpx;
		width: 56rpx;
	}

	.refresh {
		color: #fff;
		background-color: #0ecff9;
		height: 56rpx;
		width: 56rpx;
		padding: 32rpx;
		border-radius: 50%;
		animation: spin 2s infinite linear;/* 动画属性*/

	}

	
/* 旋转起始角度*/
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

@@@@@@@@@@@@@@@@@@@

可以利用css动画与轮播图简易结合，

附上html与css(此处利用的轮播图是uni-app的官方组件)

//html
<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" autoplay="true" interval="5500" duration="1000" circular="true" :duration="duration">
						<swiper-item>
							<!-- <view class="swiper-item" :style="{'background-image':'url('+img_url_1+')'}">
								<image :src="img_url_1" style="width: 200px;height:400rpx;"></image>
							</view> -->
							<view class="swiper-item">
								<image :src="img_url_3" class="move" ></image>
								<image :src="img_url_4" class="note"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image :src="img_url_1" class="move"></image>
								<image :src="img_url_4" class="note"></image>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">
								<image :src="img_url_5" class="move" ></image>
								<image :src="img_url_4" class="note"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

// css

/* /背景图/ */
	.move {
		width:1000rpx;
		height:400rpx;
		animation: 5.5s move linear infinite normal;
		position: relative;
	}

	@keyframes move {
		0% {
			transform: translate3d(0, 0, 0);
		}

		100% {
			transform: translate3d(-100px, 0, 0);
		}
	}

	/* 小图标 */
	.note {
		position: absolute;
		z-index: 999;
		top: 40rpx;
		left: 20rpx;
		animation: 5.5s note linear infinite normal;
		width: 500rpx;
		height: 200rpx;

	}

	@keyframes note {
		0% {
			transform: translate3d(0, 0, 0);
		}

		100% {
			transform: translate3d(100px, 0, 0);
		}
	}

	/deep/uni-swiper {
		height: 400rpx;
	}