7月25号=》271页-275页

标签：

12.3　　CSS3提供的Animation动画

　　　　CSS3提供了强大的Tween动画支持：Animation动画，这种动画允许开发者定义多个关键帧，浏览器

　　　　将会负责计算、插入关键帧之间的虚拟动画帧。

　　　　CSS3为Animation动画提供了如下几个属性。

　　　　　　animation-name：指定动画的名称。该属性指定一个已有的关键帧定义。

　　　　　　animation-duration：指定动画的持续时间。

　　　　　　animation-timing-function：指定动画的变化速度。

　　　　　　animation-delay：指定动画延迟多长时间才开始执行。

　　　　　　animation-iteration-count：指定动画的循环执行次数。

　　　　　　animation：这是一个复合属性。该属性的格式为：animation-name animation-duration animation-timing-function

　　　　　　　　　　　　animation-delay animation-iteration-count，使用该属性可以同时指定 animation-name animation-duration

　　　　　　　　　　　　animation-timing-function animation-delay animation-iteration-count等属性。

　　　　　　上面属性中animation-name 的属性值应该是一个关键帧定义，这个关键帧定义满足如下格式：

　　　　　　　　keyframes 关键帧名称{

　　　　　　　　　　　　from | to |百分比{

　　　　　　　　　　　　　　　　属性1：属性值1;

　　　　　　　　　　　　　　　　属性2：属性值2;

　　　　　　　　　　　　　　　　属性3：属性值3;

　　　　　　　　　　　　}

　　　　　　　　}

　　　　　　上面语法格式中，from | to |百分比用于定义关键帧的位置，其中from代表开始处;to代表动画结束帧;百分比则指定关键帧的出现

　　　　　　位置。例如,10%代表关键帧出现在动画进行了1/10时间处。一个关键帧定义可以包含多个关键帧。

　　　　　　代码示范：

　　　　　　　　//定义一个关键帧

　　　　　　　　keyframes ‘fkjava‘ {

　　　　　　　　　　//定义动画开始处的关键帧

　　　　　　　　　　0%{

　　　　　　　　　　　　left:100px;

　　　　　　　　　　}

　　　　　　　　　　//定义动画进行40%时的关键帧

　　　　　　　　　　40%{

　　　　　　　　　　　　left:150px;

　　　　　　　　　　}

　　　　　　　　　　//定义动画进行60%时的关键帧

　　　　　　　　　　60%{

　　　　　　　　　　　　left:75px;

　　　　　　　　　　}

　　　　　　　　　　//定义动画进行100%时的关键帧

　　　　　　　　　　100%{

　　　　　　　　　　　　left:100px

　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　//为div元素定义CSS样式

　　　　　　　　div{

　　　　　　　　　　width:100px;

　　　　　　　　　　height:100px;

　　　　　　　　　　border:1px solid;

　　　　　　　　　　position:absolute;

　　　　　　　　}

　　　　　　　　//为鼠标悬停的div元素定义CSS样式

　　　　　　　　div:hover{

　　　　　　　　　　//指定执行fkjava动画

　　　　　　　　　　animation-name:‘fkjava‘;

　　　　　　　　　　//指定动画的执行时间

　　　　　　　　　　animation-duration:5s;

　　　　　　　　　　//指定动画的循环次数为1

　　　　　　　　　　animation-iteration-count:1;

　　　　　　　　}

7月25号=》271页-275页

标签：

原文地址：http://www.cnblogs.com/duzuoyan/p/3871271.html