(靠谱)CSS3_教程.doc

精品文档CSS3 教程CSS3CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。现在就开始学习 CSS3 ！CSS3 实例divtransform:rotate(30deg);亲自试一试点击“亲自试一试”按钮，看看它是如何运行的。CSS3 参考手册在 W3School 中，我们提供完整的 CSS3 参考手册，包括所有属性和选择器的语法、实例、浏览器支持信息。注：本参考手册即将上线。CSS3 属性参考手册CSS3 浏览器支持参考手册CSS3 选择器参考手册CSS 颜色参考手册一、CSS3 简介CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。CSS3 模块CSS3 被划分为模块。其中最重要的 CSS3 模块包括： 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面CSS3 标准W3C 仍然在对 CSS3 规范进行开发。不过，现代浏览器已经实现了相当多的 CSS3 属性。二、CSS3 边框CSS3 边框通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。在本章中，您将学到以下边框属性： border-radius box-shadow border-image浏览器支持属性浏览器支持border-radiusbox-shadowborder-imageInternet Explorer 9 支持 border-radius 和 box-shadow。Firefox 支持所有新的边框属性。Chrome 和 Safari 支持 border-radius 和 box-shadow，但是对 border-image 的支持需要前缀 -webkit-。Opera 支持 border-radius 和 box-shadow，但是对 border-image 的支持需要前缀 -o-。CSS3 圆角边框在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在 CSS3 中，创建圆角是非常容易的。在 CSS3 中，border-radius 属性用于创建圆角：这个矩形有圆角哦！实例向 div 元素添加圆角：divborder:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */亲自试一试CSS3 边框阴影在 CSS3 中，box-shadow 用于向方框添加阴影：实例向 div 元素添加方框阴影：divbox-shadow: 10px 10px 5px #888888;亲自试一试CSS3 边框图片通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：border-image 属性允许您规定用于边框的图片！用于创建上面的边框的原始图片：实例使用图片创建围绕 div 元素的边框：divborder-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */亲自试一试新的边框属性属性描述CSSborder-image设置所有 border-image-* 属性的简写属性。3border-radius设置所有四个 border-*-radius 属性的简写属性。3box-shadow向方框添加一个或多个阴影。3三、CSS3 背景CSS3 背景CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。在本章，您将学到以下背景属性： background-size background-origin您也将学到如何使用多重背景图片。浏览器支持属性浏览器支持background-sizebackground-originFirefox 3.6 以及更早的版本不支持 background-origin 属性，对 background-size 的支持需要前缀 -moz-。Safari 4 对新背景属性的支持需要前缀 -webkit-。Internet Explorer 9、Firefox 4、Chrome、Safari 5 以及 Opera 支持新的背景属性。CSS3 background-size 属性background-size 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。例子 1调整背景图片的大小：divbackground:url(bg_flower.gif);-moz-background-size:63px 100px; /* 老版本的 Firefox */background-size:63px 100px;background-repeat:no-repeat;亲自试一试例子 2对背景图片进行拉伸，使其完成填充内容区域：divbackground:url(bg_flower.gif);-moz-background-size:40% 100%; /* 老版本的 Firefox */background-size:40% 100%;background-repeat:no-repeat;亲自试一试CSS3 background-origin 属性background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。实例在 content-box 中定位背景图片：divbackground:url(bg_flower.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;亲自试一试CSS3 多重背景图片CSS3 允许您为元素使用多个背景图像。实例为 body 元素设置两幅背景图片：body background-image:url(bg_flower.gif),url(bg_flower_2.gif);亲自试一试新的背景属性属性描述CSSbackground-clip规定背景的绘制区域。3background-origin规定背景图片的定位区域。3background-size规定背景图片的尺寸。3四、CSS3 文本效果CSS3 文本效果CSS3 包含多个新的文本特性。在本章中，您将学到如下文本属性： text-shadow word-wrap浏览器支持属性浏览器支持text-shadowword-wrapInternet Explorer 仍然不支持 text-shadow 属性。Firefox、Chrome、Safari 以及 Opera 支持 text-shadow 属性。浏览器主流浏览器都支持 word-wrap 属性。CSS3 文本阴影在 CSS3 中，text-shadow 可向文本应用阴影。您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：实例向标题添加阴影：h1text-shadow: 5px 5px 5px #FF0000;亲自试一试CSS3 自动换行单词太长的话就可能无法超出某个区域：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.在 CSS3 中，word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.下面是 CSS 代码：实例允许对长单词进行拆分，并换行到下一行：p word-wrap:break-word;亲自试一试新的文本属性属性描述CSShanging-punctuation规定标点字符是否位于线框之外。3punctuation-trim规定是否对标点字符进行修剪。3text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3text-justify规定当 text-align 设置为 justify 时所使用的对齐方法。3text-outline规定文本的轮廓。3text-overflow规定当文本溢出包含元素时发生的事情。3text-shadow向文本添加阴影。3text-wrap规定文本的换行规则。3word-break规定非中日韩文本的换行规则。3word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3五、CSS3 字体CSS3 font-face 规则在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 font-face 规则中定义的。浏览器支持属性浏览器支持font-faceFirefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。Internet Explorer 9+ 支持新的 font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。注释：Internet Explorer 8 以及更早的版本不支持新的 font-face 规则。使用您需要的字体在新的 font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：实例 font-facefont-family: myFirstFont;src: url(Sansation_Light.ttf), url(Sansation_Light.eot); /* IE9+ */divfont-family:myFirstFont;亲自试一试使用粗体字体您必须为粗体文本添加另一个包含描述符的 font-face：实例font-facefont-family: myFirstFont;src: url(Sansation_Bold.ttf), url(Sansation_Bold.eot); /* IE9+ */font-weight:bold;亲自试一试文件 Sansation_Bold.ttf 是另一个字体文件，它包含了 Sansation 字体的粗体字符。只要 font-family 为 myFirstFont 的文本需要显示为粗体，浏览器就会使用该字体。通过这种方式，我们可以为相同的字体设置许多 font-face 规则。CSS3 字体描述符下面的表格列出了能够在 font-face 规则中定义的所有字体描述符：描述符值描述font-familyname必需。规定字体的名称。srcURL必需。定义字体文件的 URL。font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded可选。定义如何拉伸字体。默认是 normal。font-style ormal italic oblique可选。定义字体的样式。默认是 normal。font-weight normal bold 100 200 300 400 500 600 700 800 900可选。定义字体的粗细。默认是 normal。unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 U+0-10FFFF。六、CSS3 2D 转换CSS3 转换通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。它如何工作？转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持属性浏览器支持transformInternet Explorer 9 需要前缀 -ms-。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。Opera 需要前缀 -o-。2D 转换在本章中，您将学到如下 2D 转换方法： translate() rotate() scale() skew() matrix()您将在下一章学习 3D 转换。实例divtransform: rotate(30deg);-ms-transform: rotate(30deg);/* IE 9 */-webkit-transform: rotate(30deg);/* Safari and Chrome */-o-transform: rotate(30deg);/* Opera */-moz-transform: rotate(30deg);/* Firefox */亲自试一试translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：实例divtransform: translate(50px,100px);-ms-transform: translate(50px,100px);/* IE 9 */-webkit-transform: translate(50px,100px);/* Safari and Chrome */-o-transform: translate(50px,100px);/* Opera */-moz-transform: translate(50px,100px);/* Firefox */亲自试一试值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。rotate() 方法通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。实例divtransform: rotate(30deg);-ms-transform: rotate(30deg);/* IE 9 */-webkit-transform: rotate(30deg);/* Safari and Chrome */-o-transform: rotate(30deg);/* Opera */-moz-transform: rotate(30deg);/* Firefox */亲自试一试值 rotate(30deg) 把元素顺时针旋转 30 度。scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：实例divtransform: scale(2,4);-ms-transform: scale(2,4);/* IE 9 */-webkit-transform: scale(2,4);/* Safari 和 Chrome */-o-transform: scale(2,4);/* Opera */-moz-transform: scale(2,4);/* Firefox */亲自试一试值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。skew() 方法通过 skew() 方法，元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：实例divtransform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg);/* IE 9 */-webkit-transform: skew(30deg,20deg);/* Safari and Chrome */-o-transform: skew(30deg,20deg);/* Opera */-moz-transform: skew(30deg,20deg);/* Firefox */亲自试一试值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。matrix() 方法matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。实例如何使用 matrix 方法将 div 元素旋转 30 度：divtransform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Opera */亲自试一试新的转换属性下面的表格列出了所有的转换属性：属性描述CSStransform向元素应用 2D 或 3D 转换。3transform-origin允许你改变被转换元素的位置。32D Transform 方法函数描述matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。translateX(n)定义 2D 转换，沿着 X 轴移动元素。translateY(n)定义 2D 转换，沿着 Y 轴移动元素。scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。scaleX(n)定义 2D 缩放转换，改变元素的宽度。scaleY(n)定义 2D 缩放转换，改变元素的高度。rotate(angle)定义 2D 旋转，在参数中规定角度。skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。skewX(angle)定义 2D 倾斜转换，沿着 X 轴。skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。七、CSS3 3D 转换3D 转换CSS3 允许您使用 3D 转换来对元素进行格式化。在本章中，您将学到其中的一些 3D 转换方法： rotateX() rotateY()点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处：2D 旋转3D 旋转它如何工作？转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持属性浏览器支持transformInternet Explorer 和 Opera 仍然不支持 3D 转换（仅支持 2D 转换）。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。实例divtransform: rotateX(120deg);-webkit-transform: rotateX(120deg);/* Safari 和 Chrome */-moz-transform: rotateX(120deg);/* Firefox */亲自试一试rotateY() 旋转通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。实例divtransform: rotateY(130deg);-webkit-transform: rotateY(130deg);/* Safari 和 Chrome */-moz-transform: rotateY(130deg);/* Firefox */亲自试一试转换属性下面的表格列出了所有的转换属性：属性描述CSStransform向元素应用 2D 或 3D 转换。3transform-origin允许你改变被转换元素的位置。3transform-style规定被嵌套元素如何在 3D 空间中显示。3perspective规定 3D 元素的透视效果。3perspective-origin规定 3D 元素的底部位置。3backface-visibility定义元素在不面对屏幕时是否可见。32D Transform 方法函数描述matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。translate3d(x,y,z)定义 3D 转化。translateX(x)定义 3D 转化，仅使用用于 X 轴的值。translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。scale3d(x,y,z)定义 3D 缩放转换。scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。rotate3d(x,y,z,angle)定义 3D 旋转。rotateX(angle)定义沿 X 轴的 3D 旋转。rotateY(angle)定义沿 Y 轴的 3D 旋转。rotateZ(angle)定义沿 Z 轴的 3D 旋转。perspective(n)定义 3D 转换元素的透视视图。八、CSS3 过渡CSS3 过渡通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。请把鼠标移动到下面的元素上：CSS3 过渡浏览器支持属性浏览器支持transitionInternet Explorer 不支持 transition 属性。Firefox 4 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。Opera 需要前缀 -o-。它如何工作？CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上 规定效果的时长实例应用于宽度属性的过渡效果，时长为 2 秒：divtransition: width 2s;-moz-transition: width 2s;/* Firefox 4 */-webkit-transition: width 2s;/* Safari 和 Chrome */-o-transition: width 2s;/* Opera */注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时：实例规定当鼠标指针悬浮于 元素上时：div:hoverwidth:300px;亲自试一试注释：当指针移出元素时，它会逐渐变回原来的样式。多项改变如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：实例向宽度、高度和转换添加过渡效果：divtransition: width 2s, height 2s, transform 2s;-moz-transition: width 2s, height 2s, -moz-transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;-o-transition: width 2s, height 2s,-o-transform 2s;亲自试一试过渡属性下面的表格列出了所有的转换属性：属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。3transition-duration定义过渡效果花费的时间。默认是 0。3transition-timing-function规定过渡效果的时间曲线。默认是 ease。3transition-delay规定过渡效果何时开始。默认是 0。3下面的两个例子设置所有过渡属性：实例在一个例子中使用所有过渡属性：divtransition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Firefox 4 */-moz-transition-property:width;-moz-transition-duration:1s;-moz-transition-timing-function:linear;-moz-transition-delay:2s;/* Safari 和 Chrome */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;/* Opera */-o-transition-property:width;-o-transition-duration:1s;-o-transition-timing-function:linear;-o-transition-delay:2s;亲自试一试实例与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：divtransition: width 1s linear 2s;/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transition:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;亲自试一试九、CSS3 动画CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 动画CSS3 keyframes 规则如需在 CSS3 中创建动画，您需要学习 keyframes 规则。keyframes 规则用于创建动画。在 keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。浏览器支持属性浏览器支持keyframesanimationInternet Explorer 仍然不支持 keyframes 规则或动画属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。Opera 需要前缀 -o-。实例keyframes myfirstfrom background: red;to background: yellow;-moz-keyframes myfirst /* Firefox */from background: red;to background: yellow;-webkit-keyframes myfirst /* Safari 和 Chrome */from background: red;to background: yellow;-o-keyframes myfirst /* Opera */from background: red;to background: yellow;CSS3 动画当您在 keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 规定动画的名称 规定动画的时长实例把 myfirst 动画捆绑到 div 元素，时长：5 秒：divanimation: myfirst 5s;-moz-animation: myfirst 5s;/* Firefox */-webkit-animation: myfirst 5s;/* Safari 和 Chrome */-o-animation: myfirst 5s;/* Opera */亲自试一试注释：您必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0。什么是 CSS3 中的动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 from 和 to，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。实例当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：keyframes myfirst0% 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 和 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;亲自试一试实例改变背景色和位置：keyframes myfirst0% background: red; left:0px; top:0px;25% background: yellow; left:200px; top:0px;50% background: blue; left:200px; top:200px;75% background: green; left:0px; top:200px;100% background: red; left:0px; top:0px;-moz-keyframes myfirst /* Firefox */0% background: red; left:0px; top:0px;25% background: yellow; left:200px; top:0px;50% background: blue; left:200px; top:200px;75% background: green; left:0px; top:200px;100% background: red; left:0px; top:0px;-webkit-keyframes myfirst /* Safari 和 Chrome */0% background: red; left:0px; top:0px;25% background: yellow; left:200px; top:0px;50% background: blue; left:200px; top:200px;75% background: green; left:0px; top:200px;100% background: red; left:0px; top:0px;-o-keyframes myfirst /* Opera */0% background: red; left:0px; top:0px;25% background: yellow; left:200px; top:0px;50% background: blue; left:200px; top:200px;75% background: green; left:0px; top:200px;100% background: red; left:0px; top:0px;亲自试一试CSS3 动画属性下面的表格列出了 keyframes 规则和所有动画属性：属性描述CSSkeyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-timing-function规定动画的速度曲线。默认是 ease。3animation-delay规定动画何时开始。默认是 0。3animation-iteration-count规定动画被播放的次数。默认是 1。3animation-direction规定动画是否在下一周期逆向地播放。默认是 normal。3animation-play-state规定动画是否正在运行或暂停。默认是 running。3下面的两个例子设置了所有动画属性：实例运行名为 myfirst 的动画，其中设置了所有动画属性：divanimation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 2s;animation-iteration-count: infinite;animation-direction: alternate;animation-play-state: running;/* Firefox: */-moz-animation-name: myfirst;-moz-animation-duration: 5s;-moz-animation-timing-function: linear;-moz-animation-delay: 2s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;/* Safari 和 Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5s;-webkit-animation-timing-function: linear;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;/* Opera: */-o-animation-name: myfirst;-o-animation-duration: 5s;-o-animation-timing-function: linear;-o-animation-delay: 2s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running;亲自试一试实例与上面的动画相同，但是使用了简写的动画 animation 属性：divanimation: myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation: