Css3 Animation详解

今天我们来看一个新的属性

Animation

这个属性目前只被safari4.0+与chrome3.0+支持，这是要事先要声明的，不过用他还是可以制作出简单的动画。

先看一个实例:Dome演示

配合Dome讲解我们快速理解一下这个属性的用法：

[css]

/*这个属性目前只有safari4.0+与chrome3.0+支持*/
/*定义过度百分比*/
@-webkit-keyframes qdgcs /*keyframes(关键字) 名称*/
{
0%{
-webkit-transform:rotateX(0deg);
background-color:Red;
color:White;
}
50%{
-webkit-transform:rotateX(180deg);/*沿X轴旋转*/
background-color:Purple;
color:Silver;
}
100%{
-webkit-transform:rotateX(360deg);
background-color:Yellow;
color:Black;
}
}
div
{
width:100px;
height:100px;
font-size:2em;
font-weight:bold;
line-height:100px;
text-align:center;
color:Blue;
-webkit-transform-style:preserve-3d;/*定义3D空间*/
-webkit-animation-name:qdgcs;/*播放动画的名称，在上边定义*/
-webkit-animation-duration:5s;/*播放周期，默认0*/
-webkit-animation-iteration-count:infinite;

/*infinite意味着播放无限次 接收一个整数 如3 即播放3次*/
-webkit-animation-direction:alternate;

/*alternate 表示第偶次播放向前（从100%到0%），反之向后（从0%到100%），normal（默认）一直向前*/
-webkit-animation-timing-function:linear;

/*ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy*/
-webkit-animation-delay:1s;/*延时播放时间*/
}
p
{
width:150px;
height:150px;
background:url("applogo.png") center no-repeat;
-webkit-transform-style:preserve-3d;/*定义3D空间*/
-webkit-animation-name:qdgcs;/*播放动画的名称，在上边keyframes定义过*/
-webkit-animation-duration:5s;/*播放周期，默认0*/
-webkit-animation-iteration-count:infinite;/*infinite意味着播放无限次 接收一个整数 如3 即播放3次*/
-webkit-animation-direction:alternate;/*alternate 表示第偶次播放向前（从100%到0%），反之向后（从0%到100%），normal（默认）一直向前*/
-webkit-animation-timing-function:linear;/*ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy*/
-webkit-animation-delay:1s;/*延时播放时间*/
}

div:hover,p:hover
{
cursor:pointer;
-webkit-animation-play-state:paused; /*我们可以通过这个属性来设置动画暂停和播放 running | paused */
}

[/css]

我们可以看一张来自w3c官网有关于css3的animation对属性变化的过程示意图！这个还是比较清晰的。

通过上面的注释与图片我们来分析一下，animation的语法来如下：

[css]

@keyframes IDENT {

from { Properties:Properties value; }

Percentage { Properties:Properties value; }

to { Properties:Properties value; }

}

/*或者全部写成百分比的形式：*/

@keyframes IDENT {
0% { Properties:Properties value; }

Percentage { Properties:Properties value; }

100% { Properties:Properties value; }

}

[/css]

当然他也有综合写法，语法顺序如下：

 

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]

 

不过有点长，还是建议分开写舒服一点。

我想大家已经对animation这个Css3新属性有了一定了解，我们可以发散思维，配合之前学过的一些属性，来完成很漂亮的动画效果，当然，这部分内容是留给读者去实验的，相信经过自己真正的书写，你会更好的理解这个属性的。

本文出自http://qdgcs.co.cc 转载请注明，谢谢