Keyframes介绍使用

Animation动画
css3为Animation动画提供的几个属性如下：
animation-name:指定动画名称，该属性指定一个已有的关键帧定义。
animation-duration:指定动画持续时间。
animation-timing-funtion:指定动画变化速度。
animation-delay：指定动画延迟多长时间才开始执行。
animation-iteration-count：指定动画的循环执行次数。
animation:这是一个复合属性。该属性的格式为：
animation:animation-name必需的。定义animation的名称。
animation-duration animation-timing-funciotn animation-delay animation-iteration-count.

keyframes(关键帧)：计算机动画术语， 帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。
keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
0%{
background: red;
}
50%{
background: red;
}
100%{
background: green;
}
}
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
在一个“@keyframes”中的样式规则可以由多个百分比构成的，
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。
CSS3动画是什么？
动画是使元素从一种样式逐渐变化为另一种样式的效果。
你可以改变任意多的样式任意多的次数。
用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，你应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
@keyframes myfirst
{
0%?? {background: red;}
25%? {background: yellow;}
50%? {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst
{
0%?? {background: red;}
25%? {background: yellow;}
50%? {background: blue;}
100% {background: green;}
}
例：**

<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}
style>

效果展示