淘先锋技术网

首页 1 2 3 4 5 6 7

css动画（animation）

css动画（animation）

1.关键帧（@keyframes规则）

语法:

@keyframes animationName{
	keyframes-selector{
		css-style;
	}
}

animationName：必写项，动画的名称（和animation-name的属性值要一样）；
keyframes-selector：必写项，动画持续时间的百分比；

@keyframes animationName{
	from{
		css-style;
	}
	to{
		css-style;
	}
}

from：0%动画的开始；to：100%动画的完成。
也可以多个关键帧周期：

@keyframes animationName{
	0%{
		css-style;
	}
	25%{
		css-style;
	}
	50%{
		css-style;
	}
	75%{
		css-style;
	}
	100%{
		css-style;
	}
}

注意：
keyframes-selector平分的是一次动画执行的时间（animation-duration）;
0%-25%是一个关键帧周期，25%-50%是另一个关键帧周期，整体属于一个动画周期；

css-style：css声明；

2.animation（动画）

没学animation之前，我们是通过transition和transform属性来实现2D或者3D动画效果，但是有一个缺点，动画不能立即执行，必须触发事件才能呈现动画过渡效果，要么就有JS来控制，不能完全用CSS来改变这一缺点，并且呈现出来的效果也比较有限。但是animation就能弥补这一缺点，下面让我们一起来看一下：

  1. animation-name：指定一系列的动画,每个名称代表一个由@keyframes定义的动画序列。

值：none特殊关键词，表示无关键帧；
keyframeName标识动画周期的名称。

  1. animation-duration：指定一个动画周期的时长,默认值为0s,表示无动画。

值：一个动画周期的时长，单位为秒(s)或者毫秒(ms)，无单位值无效；
注意：负值无效，浏览器会忽略该声明，但是一些早期的带有前缀声明的浏览器会把负值当作0s。

css代码：

	#box{
	  position:relative;
	  width:600px;
	  height:600px;
	  border:1px solid;
	}
	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	}
	@keyframes ani{
		from{
		  transform:rotate(0deg);
		}
		to{
		  transform:rotate(360deg);
		}
	}

HTML代码：

   <div id="box">
	<div class="inner"></div>
   </div>

页面效果：
animation_name
animation-name的属性就是关键帧@keyframes的名称，整个动画周期为2s。

  1. animation-delay：动画延迟的时间，单位s或者ms。
	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	}

页面效果：
在这里插入图片描述
可以看见开始的时候动画延迟了2s才开始执行。

  1. animation-iteration-count：定义了动画执行的次数。

值：n：自己定义的次数； infinite：无限次。
注意：animation-iteration-count只作用于动画内的属性（动画外的属性只有animation-delay），重复的是关键帧。

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3
	}

页面效果：
animation_iteration_count
可以看见@keyframes动画执行了3次，animation-delay只最开始的时候执行一次。

  1. animation-timing-function：动画过渡样式，默认（由慢变快再变慢）。

linear：线性过渡，等同于贝赛尔曲线(0,0,1,1)。
ease：平滑过渡，等同于贝塞尔曲线(0.25,0.1,0.25,1.0)。
ease-in：由慢到快，等同于贝塞尔曲线(0.42,0,1,1)。
ease-out：由快到慢，等同于贝塞尔曲线(0,0,0.58,1)。
ease-in-out：由慢到快再到慢，等同于贝塞尔曲线(0.42,0,0.58,1)。
cubic-bezier：贝塞尔曲线(n,n,n,n)，自行设置。
steps(n,[start|end])：传入一到两个参数，第一个参数把一个关键帧周期分成n等分，然后一个关键帧周期里的动画就会平均的运行。第二个参数start表示从动画的开头运行，相反，end（默认）就表示从动画的结尾开始运行。
备注：跟transition-timing-function里的用法一样。
注意：对于关键帧动画来说，animation-timing-function作用于一个关键帧周期而非整个动画周期,即从关键帧开始，到关键帧结束。

用平移最好来说明这点：

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out
	}
	@keyframes ani{
		0%{
		  transform:translateX(-250PX);
		}
		50%{
		  transform:translateX(0PX);
		}
		100%{
		  transform:translateX(250PX);
		}
	}

页面效果：
animation_timing_function
可以看见0%-50%和50%-100%都有一次ease-out，从而证明了animation-timing-function作用的是一个关键帧周期。

  1. animation-fill-mode：规定当动画未开始执行时(当动画完成时,或当动画有一个延迟未开始执行时)，要应用到元素的样式。

none：默认值，动画在执行之前或者之后不会应用到任何样式到目标元素；
backwards：在动画开始前（由animation-iteration-count决定），动画应用from（0%）的属性，from之前的状态与form的状态保持一致；
forwards：在动画结束后（由animation-iteration-count决定），动画应用to（100%）的属性，to之后的状态与to的状态保持一致；
both：动画遵循forwards和backwards的规则，也就是说，动画执行前是from的状态，结束后是to的状态。

上面平移的动画可以发现，动画执行前红色方块最开始是在中心，开始执行动画时应用@keyframes里0%的属性，执行到100%到达最右边，整个动画周期执行结束的时候又回到中心。

animation-fill-mode:backwards

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:backwards
	}

页面效果：
backwards
可以看见动画未开始执行时，已经应用0%的样式了。

animation-dill-mode:forwards

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:forwards
	}

页面效果：
forwards
可以看见动画周期结束后，红色小方块并没有回到原点，从而证明动画周期结束后应用了@keyframes里100%的属性。

animation-dill-mode:both

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:both
	}

页面效果：
both
可以看见动画执行前应用的@keyframes里0%的属性，结束后应用的@keyframes里100%的属性。

  1. animation-direction：定义动画执行的方向。

normal：默认值，动画按正常播放。0%->100% 0%->100%…
reverse：动画反向播放。100%->0% 100%->0%…
alternate：动画交替播放。0%->100%->0%->100%…
alternate-reverse：动画反向交替动画 100%->0%->100%->0%…
注意：reverse和alternate-reverse动画反转的是关键帧和animation-timing-function。

animation-direction:normal跟上一个动画效果一样，这里就不演示了。

animation-direction:reverse

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:both;
	  animation-direction:reverse;
	}

页面效果：
reverse
可以看见动画反向执行100%->0% 100%->0% 100%->0，动画过渡样式：原来的ease-out由快到慢变成了由慢到快。

animation-direction:alternate

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:both;
	  animation-direction:alternate;
	}

页面效果：
alternate
可以看见动画执行的过程是0%->100%->0%->100%，动画过渡样式：由快到慢->由慢到快->有快到慢。

animation-direction:alternate-reverse

	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:both;
	  animation-direction:alternate-reverse;

页面效果：
alternate_reverse
可以看见动画执行的过程是100%->0%->100%->0%，动画过渡样式：由慢到快->有快到慢->由慢到快。

  1. animation-play-state：动画运行的执行和暂停。

running：运行动画；
paused：暂停动画。

	#box{
	  position:relative;
	  width:600px;
	  height:600px;
	  border:1px solid;
	}
	.inner{
	  width:100px;
	  height:100px;
	  background:red;
	  position:absolute;
	  margin:auto;
	  top:0;
	  left:0;
	  right:0;
	  bottom:0;
	  animation-name:ani;
	  animation-duration:2s;
	  animation-delay:2s;
	  animation-iteration-count:3;
	  animation-timing-function:ease-out;
	  animation-fill-mode:both;
	  animation-direction:alternate-reverse;
	  animation-play-state:running;
	}
	@keyframes ani{
		0%{
		  transform:translateX(-250PX);
		}
		50%{
		  transform:translateX(0PX);
		}
		100%{
		  transform:translateX(250PX);
		}
	}
	#box:hover .inner{
	  animation-play-state:paused;
	}

页面效果：
animation_play_state
可以看见鼠标进入框内执行animation-play-state:paused动画停止，离开后动画又执行。

3.总结与注意事项

动画内的属性：

animation-name；
animation-duration；
animation-timing-function；
animation-direction。

动画外的属性：

animation-delay。

作用于动画的属性：

animation-iteration-count：只作用于动画内的属性，重复的是关键帧。
animation-fill-model：元素在动画外的状态。
animation-play-state：动画的运行或者暂停。

animation简写：

animation: name duration timing-function delay iteration-count direction fill-mode play-state。
注意：animation的简写有顺序要求，可以被解析为time的第一个值被分配给animation-duration，第二个分配给animation-delay，在这里本人还是推荐单独使用。

注意：

animation-name的属性值一定要和@keyframes的名字一样；
多个动画写法，用逗号隔开；
不设置animation-fill-mode动画执行完成会回到原来的状态；
animation-play-state不能使用复合写法,要单独写。