深入理解CSS 动画

通过CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画以及 JavaScript 实现的效果。要创建 CSS3 动画，需要学习 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定某个 CSS 样式就能从目前的样式更改为新样式的动画效果。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。

在 @keyframes 创建动画时，需要把它绑定到某个选择器，否则动画就不会有任何效果。指定至少两个CSS3的动画属性就可以绑定到选择器： 规定动画的名称 规定动画的时长

示例：

把 "myfirst" 动画捆绑到html的 div 元素，时长：5 秒：

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

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}
</style>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>

 

2，当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

<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>
<div></div>
<p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

以上两个例子代码可以尝试一下　

CSS3的动画属性

属性	描述	CSS
@keyframes	规定动画	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性	3
animation-name	规定 @keyframes 动画的名称	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式	3
animation-delay	规定动画何时开始。默认是 0	3
animation-iteration-count	规定动画被播放的次数。默认是 1	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"	3