css3-动画animation

在介绍animation之前，先介绍一下经常跟animation搭配使用的一个重要内容：keyframes。它被称为关键帧，类似于flash中的的关键帧，在css3中以@keyframes开头，后面{...}中定义一系列的时间段样式。

例如：

@keyframes wo{
    0%{
    	margin-left: 100px;
    	background: green;
    }
    40%{
    	margin-left: 150px;
    	background: red;
    }
    100%{
    	margin-left: 100px;
    	background: green;
    }
}

wo 是定义的动画名称，0%-100%之间可以创建多个百分比，分别给每个百分比中给需要添加动画效果的元素添加不同的样式，从而达到变换的效果。其中0%-100%可以使用关键字from to 来代表分别对应0%和100%。

animation-name属性：用来调用创建的@keyframes定义好的动画，none为没有任何动画效果。

注意：Chrome，Safari要在上面基础加-webkit-前缀，Firefox加-moz-。

animation-name：none | <identifier> [ , none | <identifier> ]*

animation-duration属性：用来设置动画播放时间，默认为0，这意味着动画周期为0，也就是没有效果。

animation-duration：<time> [ , <time> ]*

animation-timing-function属性：用来设置动画播放方式，分为以下几类：

ease：默认，元素样式从初始状态过渡到终止状态时速度由快到慢，逐渐变慢。

linear：元素样式从初始状态过渡到终止状态时速度是恒速。

ease-in：元素样式从初始状态过渡到终止状态时速度越来越快，呈加速状态，又称为渐显效果。

ease-out：元素样式从初始状态过渡到终止状态时速度越来越慢，呈减速状态，又称为渐隐效果。

ease-in-out：元素样式从初始状态过渡到终止状态时先加速后减速，又称为渐显渐隐效果。

 

animation-delay属性：设置动画开始播放时间

animation-delay：<time> [ , <time> ]*

animation-iteration-count属性：设置播放次数

animation-iteration-count：infinite | <number> [ , infinite | <number> ]*

animation-direction属性：设置动画播放方向，有两个值，其中，normal是动画的每次循环都是向前播放，alternate是动画在偶数次向前播放，奇数次向后播放。

animation-direction：normal | alternate [ , normal | alternate ]*

animation-play-state属性：设置动画播放状态，两个值，其中running默认值，类似于音乐播放器可以通过pause将正在播放的动画停下来，也可以将暂停的动画通过running运动起来，另外如果暂停动画那么元素样式就回到原始状态。

animation-play-state：running | paused [ , running | paused ]*

animation-fill-mode属性：设置动画时间外属性。其中none，默认，表示将动画按预期进行和结束，在动画完成最后一帧时动画会反转到初始帧处。forward表示在结束后继续应用最后关键帧的位置。backwards会向元素应用动画样式时迅速应用动画初始帧。both元素动画同时具有前面两种效果。

下面通过例子对上面属性进行试验：

定义一个div标签 ID并设置样式

<div id="nai"></div>

#nai{
	width: 200px;height: 100px;
	background-color: green;
}

定义的动画

@keyframes nai2{
	from{
		border-radius: 0;
	}
	to{
		border-radius: 100%;
	}
}

引用定义的动画：

#nai:hover{
	animation:nai2 3s ease-out 0s 1 alternate none;//1.调用动画名 
2.播放方式 3.动画运行方式  4.开始播放时间  5.播放次数  6.播放方向：第偶数次向前播放，基数次反方向播放7.动画时间外属性
}

通过这些属性能够简单容易的做出很多动画效果。

转载于:https://my.oschina.net/u/3614593/blog/1488871