CSSanimation和SwiperAnimation插件

css的animation属性是css3新增的一个动画属性，这个属性比较简单实用，甚至可以替代一些要js才能做的动画。
语法:

值	说明
animation-name	绑定 frames的名字
animation-duration	动画需要在多少秒完成
animation-delay	动画延迟多少秒触发
animation-timeing-function	动画运动的方式，运动曲线和流程
animation-iteration-count	制定动画运动的次数，如果为infinite则是无限次重复播放
animation-direction	是否轮流反向播放动画
animation-play-state	控制元素动画的播放状态 running 和paused running是默认值

常用简写：
//参数 要绑定的运动名称 | 运动持续时间 | 运动曲线| 延迟时间| 重复次数|动画轮流反向执行
animation：run 3s linear 0.5s infinite alertnate

div{
	width:300px;
	height:260px;
	background:#F2F2F2;
	animation: run 3s;
}


@keyframes run{
	from{
		width:300px
		height:260px
		background:#F2F2F2;
		rotate:(0deg)
	}
	to{
		width:600px;
		height:550px
		background:#67686D;
		rotate:(360deg)

	}
}

//这段代码会让div从宽300px，高260px，背景颜色#F2F2F2f， 3秒逐渐变化至w:600px，h:550px，bg:#67686D,顺便旋转个360度

@keyframes run{
	0%{
		width:300px
		height:260px
		background:#F2F2F2;
	}
	50%{
		width:400px;
		height:350px
		background:#67686D;
	}
	100%{
		width:500px;
		height:450px
		background:#67686D;
	}
}
//当然了也可用百分百，这个东西甚至可以用来做轮播图。

div:honver{
  animation-play-state:paused;
}

最后介绍一下animation插件，这是一个css插件里面封装了各种animation的css3
动画下面是他的下载地址。

大概用法就是先引入一下那个animation

然后在元素的行内样式里要加 animation 和动画的名字
还有几个可选属性用的最多的就是
animation-delay和animation-duration

animation-delay是延迟多久播放的意思，数值单位是 s ：//animation-delay:3s

animation-duration是动画持续多久的意思，数值也是s：//animation-duration：0.5s

这是一个swiper的中文站里面有详细的中文API翻译，当然了也可以去百度找英文版的swiper官网
swiper下载地址