第11章 CSS中的变形与动画

本章要求：第11章CSS中的变形与动画CSS中的变形与动画CSS中提供的用于实现过渡效果的transition相关属性如何添加关键帧如何应用animation相关属性实现Animation动画主要内容1.2D变换2.过渡效果3.Animation动画4.综合实例——模拟进度条效果第11章CSS中的变形与动画11.1.1应用transform属性实现平移11.1.2应用transform属性实现缩放11.1.3应用transform属性实现倾斜11.1.4应用transform属性实现旋转11.1.5更改变换的中心点11.12D变换应用transform属性的translate(<length>[,<length>])、translateX(<length>)和translateY(<length>)函数可以实现2D平移。其中，translate(<length>[,<length>])可以实现在X轴和Y轴上同时平移，而后面的两个函数则用于单独实现在X轴或者在Y轴上平移。如果将translate(<length>[,<length>])中的第一个参数设置为0，那么可以实现translateY(<length>)函数的效果；如果将第二个参数设置为0，那么可以实现translateX(<length>)函数的效果。实现平移的这3个函数的参数值都是像素值，可以是正值也可以是负值，x轴为正值时代表向右移动，为负值时代表向左移动，y轴为正值时代表向下移动，为负值时代表向上移动说明：

目前主流浏览器并未支持标准的transform属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。11.1.1应用transform属性实现平移【例11-1】应用transform属性的translate()函数实现在X轴和Y轴上同时平移，以及应用translateX()函数实现在X轴上平移，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:0px; /*设置顶边距*/ left:0px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }#xy{ -moz-transform:translate(100px,80px); /*Firefox下在X和Y轴上进行平移*/ -webkit-transform:translate(100px,80px); /*Chrome下在X和Y轴上进行平移*/ -o-transform:translate(100px,80px); /*Opera下在X和Y轴上进行平移*/ -ms-transform:translate(100px,80px); /*IE下在X和Y轴上进行平移*/ }#x{ -moz-transform:translateX(300px); /*Firefox下在X轴上进行平移*/ -webkit-transform:translateX(300px); /*Chrome下在X轴上进行平移*/ -o-transform:translateX(300px); /*Opera下在X轴上进行平移*/ -ms-transform:translateX(300px); /*IE下在X轴上进行平移*/}

#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:300px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="xy"></div><divclass="preview"id="x"></div>在IE浏览器中浏览该页面，可以看到如图11-1所示的界面。图11-1应用transform属性平移字条图片应用transform属性的scale(<number>[,<number>])、scaleX(<number>)、scaleY(<number>)函数可以实现缩放。其中，scale(<number>[,<number>])可以实现在X轴和Y轴上同时缩放，而后面的两个函数则用于单独实现在X轴或者在Y轴上缩放。当使用scale(<number>[,<number>])函数时，如果只指定一个参数，那么在X轴和Y轴都缩放参数所指定的比例。实现缩放的这3个函数的参数值都是自然数数值（可以为正、负、小数），绝对值大于1，代表放大；绝对值小于1，代表缩小。当值为负数时，对象反转。当参数值为1时，代表不进行缩放。注意：

当使用scaleX(<number>)或scaleY(<number>)函数时，实现的是非等比例缩放，也就是只能对X轴进行缩放或者对X轴进行缩放。11.1.2应用transform属性实现缩放【例11-2】应用transform属性的scale()函数实现在X轴和Y轴上同时缩放不同的比例，以及应用scaleX()函数实现在X轴上缩放，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:0px; /*设置顶边距*/ left:0px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }#xy{ -moz-transform:scale(0.7,0.8); /*Firefox下在X和Y轴上进行缩放*/ -webkit-transform:scale(0.7,0.8); /*Chrome下在X和Y轴上进行缩放*/ -o-transform:scale(0.7,0.8); /*Opera下在X和Y轴上进行缩放*/ -ms-transform:scale(0.7,0.8); /*IE下在X和Y轴上进行缩放*/ }#x{ left:300px; -moz-transform:scaleX(1.2); /*Firefox下在X轴上进行缩放*/ -webkit-transform:scaleX(1.2); /*Chrome下在X轴上进行缩放*/ -o-transform:scaleX(1.2); /*Opera下在X轴上进行缩放*/ -ms-transform:scaleX(1.2); /*IE下在X轴上进行缩放*/}

#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:300px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="xy"></div><divclass="preview"id="x"></div>在IE浏览器中浏览该页面，可以看到如图11-2所示的界面。图11-2应用transform属性缩放字条图片应用transform属性的skew(<angle>[,<angle>])、skewX(<angle>)、skewY(<angle>)函数可以实现倾斜。其中，skew(<angle>[,<angle>])可以实现在X轴和Y轴上同时倾斜，而后面的两个函数则用于单独实现在X轴或者在Y轴上倾斜。如果将skew(<angle>[,<angle>])中的第一个参数设置为0，那么可以实现skewY(<angle>)函数的效果；如果将第二个参数设置为0，那么可以实现skewX(<angle>)函数的效果。实现倾斜的这3个函数的参数值都是度数，单位为deg（角度），可以为负数。【例11-3】应用transform属性的skew()函数实现在X轴上倾斜3度，在Y轴上倾斜30度，以及应用skewX()函数实现在X轴上倾斜30度，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:0px; /*设置顶边距*/ left:0px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }11.1.3应用transform属性实现倾斜#xy{ -moz-transform:skew(3deg,30deg); /*Firefox下在X和Y轴上进行倾斜*/ -webkit-transform:skew(3deg,30deg); /*Chrome下在X和Y轴上进行倾斜*/ -o-transform:skew(3deg,30deg); /*Opera下在X和Y轴上进行倾斜*/ -ms-transform:skew(3deg,30deg); /*IE下在X和Y轴上进行倾斜*/ }

#x{ left:300px; -moz-transform:skewX(30deg); /*Firefox下在X轴上进行倾斜*/ -webkit-transform:skewX(30deg); /*Chrome下在X轴上进行倾斜*/ -o-transform:skewX(30deg); /*Opera下在X轴上进行倾斜*/ -ms-transform:skewX(30deg); /*IE下在X轴上进行倾斜*/}

#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:300px; /*设置最大高度*/</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="xy"></div><divclass="preview"id="x"></div>在IE浏览器中浏览该页面，可以看到如图11-3所示的界面。图11-3应用transform属性倾斜字条图片应用transform属性的rotate(<angle>)函数可以实现2D旋转。参数<angle>用于指定旋转的角度，其值可取正或负，正值代表顺时针旋转，负值代表逆时针旋转。在使用该函数以前，可以应用transform-origin属性定义变换的中心点。【例11-4】应用transform属性的rotate()函数分别实现顺时针旋转30度和逆时针旋转30度，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:0px; /*设置顶边距*/ left:0px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }#rotate{ -moz-transform:rotate(30deg); /*Firefox下顺时针旋转30度*/ -webkit-transform:rotate(30deg); /*Chrome下顺时针旋转30度*/ -o-transform:rotate(30deg); /*Opera下顺时针旋转30度*/ -ms-transform:rotate(30deg); /*IE下顺时针旋转30度*/ }11.1.4应用transform属性实现旋转

#rotate1{ left:300px; -moz-transform:rotate(-30deg); /*Firefox下逆时针旋转30度*/ -webkit-transform:rotate(-30deg); /*Chrome下逆时针旋转30度*/ -o-transform:rotate(-30deg); /*Opera下逆时针旋转30度*/ -ms-transform:rotate(-30deg); /*IE下逆时针旋转30度*/}

#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:300px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="rotate"></div><divclass="preview"id="rotate1"></div>在IE浏览器中浏览该页面，可以看到如图11-4所示的界面。图11-4应用transform属性旋转字条图片在CSS中，提供了transform-origin属性来更改变换的中心点。该属性可以提供两个参数值，也可以提供一个参数值。如果提供两个，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，该值将表示横坐标；纵坐标将默认为50%。说明：

目前主流浏览器并未支持标准的transform-origin属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。11.1.5更改变换的中心点transform-origin属性的语法格式如下：transform-origin：[<percentage>|<length>|left|center①|right][<percentage>|<length>|top|center②|bottom]?属性值说明如表11-2所示。表11-2 transform-origin属性的属性值说明属性值说明<percentage>用百分比指定坐标值。可以为负值<length>用长度值指定坐标值。可以为负值left指定原点的横坐标为left，居左center①指定原点的横坐标为center，居中right指定原点的横坐标为right，居右top指定原点的纵坐标为top，居顶center②指定原点的纵坐标为center，居中bottom指定原点的纵坐标为bottom，居底【例11-5】在IE浏览器下更改变换的中心点为左上角；在Firefox浏览器下更改变换的中心点为右下角；在Chrome浏览器下更改变换的中心点为底边界的中心点，可以使用下面的代码。#rotate{ -moz-transform-origin:bottomright; /*Firefox下设置中心点为右下角*/ -ms-transform-origin:topleft; /*Firefox下设置中心点为左上角*/ -webkit-transform-origin:bottom; /*Firefox下设置中心点为底边界的中心点*/ -moz-transform:rotate(30deg); /*Firefox下顺时针旋转30度*/ -webkit-transform:rotate(30deg); /*Chrome下顺时针旋转30度*/ -o-transform:rotate(30deg); /*Opera下顺时针旋转30度*/ -ms-transform:rotate(30deg); /*IE下顺时针旋转30度*/ }在IE9浏览器下的运行结果如图11-5所示；在Firefox浏览器下的运行结果如图11-6所示；图11-5在IE9浏览器下的运行结果图11-6在Firefox浏览器下的运行结果在Chrome浏览器下的运行结果如图11-7所示图11-7在Chrome浏览器下的运行结果11.2过渡效果11.2.1指定过渡持续的时间11.2.2指定参与过渡的属性11.2.3指定过渡的动画类型11.2.4指定过渡的延迟时间在CSS中使用transition-duration属性可以指定过渡持续的时间，该属性的语法格式如下：transition-duration：<time>[,<time>]*属性值说明：<time>：用于指定过渡持续的时间，默认值为0，如果存在多个属性值，以逗号“,”进行分隔。说明：

目前主流浏览器并未支持标准的transition-duration属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。11.2.1指定过渡持续的时间【例11-6】应用transition-duration属性实现当鼠标移入时逐渐旋转的动画效果，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:10px; /*设置顶边距*/ left:30px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }#rotate{ -moz-transition-duration:1.5s; /*设置过渡持续的时间*/ -webkit-transition-duration:1.5s; /*设置过渡持续的时间*/ -o-transition-duration:1.5s; /*设置过渡持续的时间*/ -ms-transition-duration:1.5s; /*设置过渡持续的时间*/ }#rotate:hover{ top:50px;-moz-transform:rotate(30deg); /*Firefox下顺时针旋转30度*/ -webkit-transform:rotate(30deg); /*Chrome下顺时针旋转30度*/ -o-transform:rotate(30deg); /*Opera下顺时针旋转30度*/ -ms-transform:rotate(30deg); /*IE下顺时针旋转30度*/ }

#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:310px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="rotate"></div>在Firefox浏览器中运行本实例，并将鼠标移动到字条上时，将显示逐渐旋转的过渡动画效果，运行结果如图11-8所示，将鼠标移出后，将逐渐旋转回原来的位置。图11-8在Firefox浏览器下的运行结果在CSS中使用transition-property属性可以指定参与过渡的属性，该属性的语法格式如下：transition-property：all|none|<property>[,<property>]*属性值说明如下：all：默认值，表示所有可以进行过渡的CSS属性；none：表示不指定过渡的CSS属性；<property>：表示指定要进行过渡的CSS属性。可以同时指定多个属性值，以逗号“,”进行分隔。说明：

目前主流浏览器并未支持标准的transition-property属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。11.2.2指定参与过渡的属性

【例11-7】应用transition-property属性和transition-duration属性实现当鼠标移入时逐渐放大的动画效果，关键代码如下：<style>.preview{ position:absolute; /*设置为绝对布局*/ top:10px; /*设置顶边距*/ left:30px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/}#rotate{ -moz-transition-property:top,-moz-transform:scale(1.2); /*这里也可以用all*/ -moz-:.5s; /*设置过渡持续的时间*/ -webkit-transition-property:top,-webkit-transform:scale(1.2);/*这里也可以用all*/ -webkit-transition-duration:.5s; /*设置过渡持续的时间*/ -o-transition-property:top,-o-transform:scale(1.2); /*这里也可以用all*/ -o-transition-duration:.5s; /*设置过渡持续的时间*/ -ms-transition-property:top,-ms-transform:scale(1.2); /*这里也可以用all*/ -ms-transition-duration:.5s; /*设置过渡持续的时间*/#rotate:hover{ top:50px; -moz-transform:scale(1.2); /*Firefox下放大120%*/ -webkit-transform:scale(1.2); /*Chrome下放大120%*/ -o-transform:scale(1.2); /*Opera下放大120%*/ -ms-transform:scale(1.2); /*IE下放大120%*/ }#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:300px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="rotate"></div>在Firefox浏览器中运行本实例，并将鼠标移动到字条上时，将显示逐渐放大的过渡动画效果，运行结果如图11-9所示，将鼠标移出后，将逐渐恢复为原来的大小。图11-9在Firefox浏览器下的运行结果11.2.3指定过渡的动画类型在CSS中使用transition-timing-function属性可以指定过渡的动画类型，该属性的语法格式如下：transition-timing-function：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2)[,linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(x1,y1,x2,y2)]*属性值说明如表11-3所示。表11-3 transition-timing-function属性的属性值说明属性值说明linear线性过渡，也就是匀速过渡。等同于贝塞尔曲线(0.0,0.0,1.0,1.0)ease平滑过渡，过渡的速度会逐渐慢下来。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)ease-in由慢到快，也就是逐渐加速。等同于贝塞尔曲线(0.42,0,1.0,1.0)ease-out由快到慢，也就是逐渐减速。等同于贝塞尔曲线(0,0,0.58,1.0)ease-in-out由慢到快再到慢，也就是先加速后减速。等同于贝塞尔曲线(0.42,0,0.58,1.0)cubic-bezier(x1,y1,x2,y2)特定的贝塞尔曲线类型，如图11-10所示。函数中的x1，y1用来确定图11-10中的P1点的位置，x2，y2用来确定图11-10中的P2点的位置，其中，4个参数值需在[0,1]区间内，否则无效【例11-8】实现逐渐加速的旋转动画效果，要求图片旋转360度，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:10px; /*设置顶边距*/ left:30px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }#rotate{ -moz-transition-duration:1.5s; /*设置过渡持续的时间*/ -moz-transition-timing-function:ease-in; /*设置过渡持续的动画类型为由慢到快*/ -webkit-transition-duration:1.5s; /*设置过渡持续的时间*/ -webkit-transition-timing-function:ease-in; /*设置过渡持续的动画类型为由慢到快*/ -o-transition-duration:1.5s; /*设置过渡持续的时间*/ -o-transition-timing-function:ease-in; /*设置过渡持续的动画类型为由慢到快*/ -ms-transition-duration:1.5s; /*设置过渡持续的时间*/ -ms-transition-timing-function:ease-in; /*设置过渡持续的动画类型为由慢到快*/ #rotate:hover{ -moz-transform:rotate(360deg); /*Firefox下顺时针旋转360度*/ -webkit-transform:rotate(90deg); /*Chrome下顺时针旋转360度*/ -o-transform:rotate(90deg); /*Opera下顺时针旋转360度*/ -ms-transform:rotate(90deg); /*IE下顺时针旋转360度*/ }#wall{ background-image:url(images/bg_main.jpg); max-width:600px; /*设置最大宽度*/ height:310px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:no在Firefox浏览器中运行本实例，并将鼠标移动到字条上时，将显示逐渐加速的旋转动画效果，运行结果如图11-11所示，将鼠标移出后，将逐渐旋转回原来的位置。图11-11在Firefox浏览器下的运行结果11.2.4指定过渡的延迟时间在CSS中使用transition-duration属性可以指定过渡的延迟时间，也就是延迟多长时间才开始过渡。该属性的语法格式如下：transition-delay：<time>[,<time>]*属性值说明：<time>：用于指定延迟过渡的时间，默认值为0，如果存在多个属性值，以逗号“,”进行分隔。说明：

目前主流浏览器并未支持标准的transition-delay属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox浏览器添加-moz-前缀；为IE浏览器添加-ms-前缀；为Opera浏览器添加-o-前缀；为Chrome浏览器添加-webkit-前缀。【例11-9】应用transition-delay属性实现当鼠标移入时延迟0.5秒开始旋转的动画效果，关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:10px; /*设置顶边距*/ left:30px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ #rotate{ -moz-transition-duration:1.5s; /*设置过渡持续的时间*/ -moz-transition-delay:0.5s; /*设置延迟过渡的时间*/ -webkit-transition-duration:1.5s; /*设置过渡持续的时间*/ -webkit-transition-delay:0.5s; /*设置延迟过渡的时间*/ -o-transition-duration:1.5s; /*设置过渡持续的时间*/ -o-transition-delay:0.5s; /*设置延迟过渡的时间*/ -ms-transition-duration:1.5s; /*设置过渡持续的时间*/ -ms-transition-delay:0.5s; /*设置延迟过渡的时间*/

#rotate:hover{ -moz-transform:rotate(360deg); /*Firefox下顺时针旋转360度*/ -webkit-transform:rotate(90deg); /*Chrome下顺时针旋转360度*/ -o-transform:rotate(90deg); /*Opera下顺时针旋转360度*/ -ms-transform:rotate(90deg); /*IE下顺时针旋转360度*/ }#wall{ background-image:url(images/bg_main.jpg); max-width:320px; /*设置最大宽度*/ height:310px; /*设置最大高度*/}</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="rotate"></div>在Firefox浏览器中运行本实例，并将鼠标移动到字条上时，等待0.5秒后，开始显示逐渐旋转的过渡动画效果，运行结果如图11-12所示，将鼠标移出后，仍然等待0.5秒后，逐渐旋转回原来的位置。图11-12在Firefox浏览器下的运行结果11.3Animation动画11.3.1关键帧11.3.2动画属性11.3.1关键帧在实现Animation动画时，需要先定义关键帧，定义关键帧的语法格式如下：@keyframesname'{'<keyframes-blocks>'}';说明：

目前只有Firefox、Chrome和Safari浏览器支持与Animation动画的相关属性，其他主流浏览器还不支持，但是这3个浏览器也并未支持标准的与Animation动画的相关属性，需要为Firefox浏览器添加-moz-前缀；为Chrome和Safari浏览器添加-webkit-前缀。属性值说明：name：定义一个动画名称，该动画名称将用来被animation-name属性（指定动画名称属性）所使用；<keyframes-blocks>：定义动画在不同时间段的样式规则。该属性值包括以下两种形式。使用关键字from和to定义关键帧的位置，实现从一个状态过渡到另一个状态，语法格式如下：from{

属性1:属性值1;属性2:属性值2;… 属性n:属性值n;}to{

属性1:属性值1;属性2:属性值2;… 属性n:属性值n;}例如，定义一个名称为opacityAnim的关键帧，用于实现从完全透明到完全不透明的动画效果，可以使用下面的代码。@-webkit-keyframesopacityAnim{ from{opacity:0;} to{opacity:1;}}使用百分比定义关键帧的位置，实现通过百分比来指定过渡的各个状态，语法格式如下：百分比1{

属性1:属性值1;属性2:属性值2;… 属性n:属性值n;}…百分比n{

属性1:属性值1;属性2:属性值2;… 属性n:属性值n;}说明：在指定百分比时，一定要加%，例如，0%、50%和100%等。例如，定义一个名称为复杂complexAnim的关键帧，用于实现将对象从完全透明到完全不透明，再逐渐收缩到80%，最后再从完全透明过渡到完全不透明的动画效果，可以使用下面的代码。@-webkit-keyframescomplexAnim{ 0%{opacity:0;} 20%{opacity:1;} 50%{-webkit-transform:scale(0.8);} 80%{opacity:1;} 100%{opacity:0;}}11.3.2动画属性要实现Animation动画，在定义了关键帧以后，还需要使用动画相关属性来执行关键帧的变化。CSS为Animation动画提供下面的9个属性。animation：复合属性。用于指定对象所应用的动画特效；animation-name：用于指定对象所应用的动画名称；animation-duration：用于指定对象动画的持续时间，单位为s（秒），如1s、5s等；animation-timing-function：用于指定对象动画的过渡类型，其值与transition-timing-function属性值相关，也是如图18.3所示的属性值；animation-delay：用于指定对象动画延迟的时间，单位为s（秒），如1s、5s等；animation-iteration-count：用于指定对象动画的循环次数，infinite表示无限次循环；animation-direction：用于指定对象动画在循环中是否反向运动，值为normal（默认值）表示正常方向，值为alternate表示正常与反向交替；animation-play-state：用于指定对象动画的状态，值为running（默认值）表示运动；值为paused表示暂停；animation-fill-mode：用于指定对象动画时间之外的状态，值为none（默认值）表示不设置对象动画之外的状态；值为forwards表示设置对象状态为动画结束时的状态；值为backwards表示设置对象状态为动画开始时的状态；值为both表示设置对象状态为动画结束或开始的状态。说明：

目前只有Firefox、Chrome和Safari浏览器支持与Animation动画的相关属性，其他主流浏览器还不支持，但是这3个浏览器也并未支持标准的与Animation动画的相关属性，需要为Firefox浏览器添加-moz-前缀；为Chrome和Safari浏览器添加-webkit-前缀。【例11-10】实现让图片从完全透明到完全不透明过渡，再逐渐缩小指定比例后还原，再从完全不透明到完全透明，直到图片消失的Animation动画。关键代码如下：<style>.preview{ background:url(images/style0.gif)no-repeat; /*设置背景图片，并且不重复*/ position:absolute; /*设置为绝对布局*/ top:10px; /*设置顶边距*/ left:30px; /*设置左边距*/ width:240px; /*设置宽度*/ height:210px; /*设置高度*/ }#change{ opacity:0;}/*编写在Chrome和Safari浏览器中使用的关键帧*/@-webkit-keyframescomplexAnim{ 0%{opacity:0;} /*完全透明*/ 20%{opacity:1;} /*完全不透明*/ 50%{-webkit-transform:scale(0.8);} /*缩放到80%*/ 80%{opacity:1;} /*完全不透明*/ 100%{opacity:0;} /*完全透明*/}@-moz-keyframescomplexAnim{ 0%{opacity:0;} /*完全透明*/ 20%{opacity:1;} /*完全不透明*/ 50%{-moz-transform:scale(0.8);} /*缩放到80%*/ 80%{opacity:1;} /*完全不透明*/ 100%{opacity:0;} /*完全透明*/#change:hover{ /*实现在Chrome和Safari浏览器的动画效果*/ -webkit-animation-name:complexAnim; /*指定动画名称*/ -webkit-animation-duration:5s; /*指定动画持续的时间*/ -webkit-animation-iteration-count:infinite; /*指定无限次循环*/ /*实现在Firefox浏览器的动画效果*/ -moz-animation-name:complexAnim; /*指定动画名称*/ -moz-animation-duration:5s; /*指定动画持续的时间*/ -moz-animation-iteration-count:infinite; /*指定无限次循环*/#wall{ background-image:url(images/bg_main.jpg); max-width:320px; /*设置最大宽度*/ height:310px; /*设置最大高度*/</style></head><bodystyle="margin:0px;"><divid="wall"></div><divclass="preview"style="background-image:none;border:1px#000000dashed;"></div><divclass="preview"id="change"></div>在Firefox浏览器中运行本实例，并将鼠标移动到虚线框上时，字条图片将逐渐显示，当图片已经完全显示后，图片开始缩小，当缩小到80%时，再逐渐放大到原图片，最后逐渐消失，运行结果如图11-13所示。图11-13在Firefox浏览器下的运行结果11.4综合实例——模拟进度条效果应用关键帧@keyframes以及Animation动画的相关属性可以实现通过动态改变对象的属性值来实现动画效果。本实例将实现一个模拟进度条效果的Animation动画，即将鼠标移动到进度条区域的最左侧时，进度条开始走动，直到区域的右边界后静止，效果如图11-14所示图11-14