《（本科）5 Web前端的表现层：CSS3布局ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）5 Web前端的表现层：CSS3布局ppt课件.pptx（103页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：5 Web前端的表现层：前端的表现层：CSS3布局布局第五章 Web前端的表现层：CSS3布局陈童博客：博客：目录1. 定位（Positioning）2. 布局（Layout）3. 伸缩盒（Flexible Box Layout）4. 多列布局（Multi-column）5. 渐变（Gradient）6. 变换（Transform）7. 过渡（Transition）8. 动画（Animation）9. 打印（Print）10. 媒体查询（Media Queries）1. 定位（Positioning）属性描述position用于指定一个元素在文档中的定位方式top定义了元素的上外边
2、距边界与其包含块上边界之间的偏移right定义了元素的右外边距边界与其包含块右边界之间的偏移bottom定义了元素的底外边距边界与其包含块底边界之间的偏移left定义了元素的左外边距边界与其包含块左边界之间的偏移z-index定义一个元素在文档中的层叠顺序clip定义了元素的哪一部分是可见的。区域外的部分是透明的1. 定位（Positioning）position：static | relative | absolute | fixed | stickystatic：对象遵循常规流。此时4个定位偏移属性不会被应用。relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，rig
3、ht，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。sticky：对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果1. 定位（Positio
4、ning）top: auto | | auto：无特殊定位，根据HTML定位规则在文档流中分配：用长度值来定义距离顶部的偏移量。可以为负值。：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。1. 定位（Positioning）right：auto | | auto：无特殊定位，根据HTML定位规则在文档流中分配：用长度值来定义距离顶部的偏移量。可以为负值。：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。1. 定位（Positioning）bottom: auto | | auto：无特殊定位，根据HTML定位规则在文档流中分配：用长度值来定义距离顶部的
5、偏移量。可以为负值。：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。1. 定位（Positioning）left: auto | | auto：无特殊定位，根据HTML定位规则在文档流中分配：用长度值来定义距离顶部的偏移量。可以为负值。：用百分比来定义距离顶部的偏移量。百分比参照包含块的高度。可以为负值。1. 定位（Positioning）z-index: auto | 定义一个元素在文档中的层叠顺序auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。：用整数值来定义堆叠级别。可以为负值1. 定位（Positioning）cli
6、p：auto | ：rect(|auto |auto |auto |auto)auto：对象无剪切rect(|auto |auto |auto |auto)：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。上-左方位的裁剪：从0开始剪裁直到设定值，即上-左方位的auto值等同于0；右-下方位的裁剪：从设定值开始剪裁直到最右边和最下边，即右-下方位的auto值为盒子的实际宽度和高度；2. 布局（Layout）属性描述display定义了元素是否显示，及生成哪种盒用于显示float定义了元素向左或者向右浮动放置。请参阅cle
7、ar属性clear定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置。请参阅float属性visibility定义了元素是否可见。与display属性不同，此属性为隐藏的对象保留其占据的物理空间overflow简写属性。定义了元素处理溢出内容的方式box-sizing设置或检索对象的盒模型组成模式。resize设置或检索对象的区域是否允许用户缩放，调节元素尺寸大小。2. 布局（Layout）display：none | inline | block | list-item | inline-block | table | inline-table | table-c
8、aption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flexnone：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline：指定对象为内联元素。block：指定对象为块元素。list-item：指定对象为
9、列表项目。inline-block：指定对象为内联块元素。2. 布局（Layout）float：none | left | right定义了元素向左或者向右浮动放置none：设置元素不浮动left：设置元素浮在左边right：设置元素浮在右边2. 布局（Layout）clear：none | left | right | both定义了一个元素是否可以放置在它之前的浮动元素旁边，或者必须向下移动在新行中放置none：允许两边都可以有浮动对象both：不允许有浮动对象left：不允许左边有浮动对象right：不允许右边有浮动对象2. 布局（Layout）visibility：visible |
10、hidden | collapse定义了元素是否可见。与display属性不同，visibility会为隐藏的元素保留其占据的物理空间visible：设置对象可视hidden：设置对象隐藏collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden2. 布局（Layout）overflow：visible | hidden | scroll | auto | clipvisible：对溢出内容不做处理，内容可能会超出容器。hidden：隐藏溢出容器的内容且不出现滚动条。scroll：隐藏溢出容器的内容，溢出的内容可以通过滚动呈现。a
11、uto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。textarea元素的overflow默认值就是auto。clip：与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动2. 布局（Layout）box-sizing：content-box | border-boxcontent-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( E
12、lement width = width + border + padding ) 此属性表现为标准模式下的盒模型。border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型2. 布局（Layout）resize：none | both | horizontal | verticalnone：不允许用户调整元素大小。both：用户可以调节元素的宽度和高度。horizon
13、tal：用户可以调节元素的宽度vertical：用户可以调节元素的高度3. 伸缩盒（Flexible Box Layout）属性描述flex-grow设置或检索弹性盒的扩展比率。flex-shrink设置或检索弹性盒的收缩比率flex-basis设置或检索弹性盒伸缩基准值。flex复合属性。设置或检索伸缩盒对象的子元素如何分配空间。flex-direction设置或检索伸缩盒对象的子元素在父容器中的位置。flex-wrap设置或检索伸缩盒对象的子元素超出父容器时是否换行。flex-flow复合属性。设置或检索伸缩盒对象的子元素排列方式。align-content设置或检索弹性盒堆叠伸缩行的对齐
14、方式。align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。align-self设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。order设置或检索伸缩盒对象的子元素出現的順序。3. 伸缩盒（Flexible Box Layout）flex-grow：用数值来定义扩展比率。不允许负值设置或检索弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间3. 伸缩盒（Flexible Box Layout）flex-shrink：用数值来定义收缩比率。不允许负值设置或
15、检索弹性盒的收缩比率。根据弹性盒子元素所设置的收缩因子作为比率来收缩空间3. 伸缩盒（Flexible Box Layout）flex-basis： | | auto | content：用长度值来定义宽度。不允许负值：用百分比来定义宽度。不允许负值auto：无特定宽度值，取决于其它属性值content：基于内容自动计算宽度3. 伸缩盒（Flexible Box Layout）flex：none | ? | none： none关键字的计算值为: 0 0 auto ：用来指定扩展比率，即剩余空间是正值时此flex子项相对于flex容器里其他flex子项能分配到空间比例。：用来指定收缩比率，即剩
16、余空间是负值时此flex子项相对于flex容器里其他flex子项能收缩的空间比例。在收缩的时候收缩比率会以伸缩基准值加权。在flex属性中该值如果被省略则默认为1：用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，flex子项长度的起始数值。在flex属性中该值如果被省略则默认为0%。在flex属性中该值如果被指定为auto，则伸缩基准值的计算值是自身的设置，如果自身的宽度没有定义，则长度取决于内容3. 伸缩盒（Flexible Box Layout）flex-direction：row | row-reverse | column | column-reverserow：主轴与行
17、内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。row-reverse：对齐方式与row相反。column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。column-reverse：对齐方式与column相反。3. 伸缩盒（Flexible Box Layout）flex-wrap：nowrap | wrap | wrap-reversenowrap： flex容器为单行。该情况下flex子项可能会溢出容器wrap： flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行wrap-reverse：反转 wrap 排列3. 伸缩盒（Fl
18、exible Box Layout）flex-flow： | 复合属性。设置或检索弹性盒模型对象的子元素排列方式：定义弹性盒子元素的排列方向。：控制flex容器是单行或者多行3. 伸缩盒（Flexible Box Layout）align-content：flex-start | flex-end | center | space-between | space-around | stretchflex-start：各行向弹性盒容器的起始位置堆叠flex-end：各行向弹性盒容器的结束位置堆叠center：各行向弹性盒容器的中间位置堆叠space-between：各行在弹性盒容器中平均分布sp
19、ace-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。3. 伸缩盒（Flexible Box Layout）align-items：flex-start | flex-end | center | baseline | stretchflex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end：弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住该行的侧轴结束边界。
20、center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制3. 伸缩盒（Flexible Box Layout）align-self：auto | flex-start | flex-end | center | baseline | st
21、retchauto：如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。stretch：如果
22、指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制3. 伸缩盒（Flexible Box Layout）justify-content：flex-start | flex-end | center | space-between | space-aroundflex-start：弹性盒子元素将向行起始位置对齐flex-end：弹性盒子元素将向行结束位置对齐center：弹性盒子元素将向行中间位置对齐space-between：弹性盒子元素会平均地分布在行里space-around：弹性盒子元素会平均
23、地分布在行里，两端保留子元素与子元素之间间距大小的一半3. 伸缩盒（Flexible Box Layout）order：用整数值来定义排列顺序，数值小的排在前面。可以为负值设置或检索弹性盒模型对象的子元素出現的順序4. 多列布局（Multi-column）属性描述column-width设置或检索对象每列的宽度column-count设置或检索对象的列数columns设置或检索对象的列数和每列的宽度。复合属性column-gap设置或检索对象的列与列之间的间隙column-rule-width设置或检索对象的列与列之间的边框厚度。column-rule-style设置或检索对象的列与列之间的边
24、框样式。column-rule-color设置或检索对象的列与列之间的边框颜色。column-rule设置或检索对象的列与列之间的边框。复合属性column-span设置或检索对象元素是否横跨所有列。column-fill设置或检索对象所有列的高度是否统一。column-break-before设置或检索对象之前是否断行。column-break-after设置或检索对象之后是否断行。column-break-inside设置或检索对象内部是否断行。4. 多列布局（Multi-column）column-width： | auto：用长度值来定义列宽。不允许负值auto：根据自定分配宽度设置或
25、检索对象每列的宽度4. 多列布局（Multi-column）column-count： | auto：用整数值来定义列数。不允许负值auto：根据自定分配宽度设置或检索对象的列数4. 多列布局（Multi-column）columns： | ：设置或检索对象每列的宽度：设置或检索对象的列数设置或检索对象的列数和每列的宽度。复合属性4. 多列布局（Multi-column）column-gap： | normal：用长度值来定义列与列之间的间隙。不允许负值normal：与大小相同。假设该对象的font-size为16px，则normal值为16px，类推。设置或检索对象的列与列之间的间隙4. 多
26、列布局（Multi-column）column-rule-width： | thin | medium | thick：用长度值来定义边框的厚度。不允许负值medium：定义默认厚度的边框。thin：定义比默认厚度细的边框。thick：定义比默认厚度粗的边框设置或检索对象的列与列之间的边框厚度。如果设置为none或者hidden，本属性将失去作用4. 多列布局（Multi-column）column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetnone：
27、无轮廓hidden：隐藏边框。dotted：点状轮廓。dashed：虚线轮廓。solid：实线轮廓double：双线轮廓。两条单线与其间隔的和等于指定的值groove：3D凹槽轮廓。ridge：3D凸槽轮廓。inset：3D凹边轮廓。outset：3D凸边轮廓4. 多列布局（Multi-column）column-rule-color：指定颜色设置或检索对象的列与列之间的边框颜色。如果等于0或设置为none | hidden，本属性将被忽略4. 多列布局（Multi-column）column-rule： | | ：设置或检索对象的列与列之间的边框厚度。：设置或检索对象的列与列之间的边框样式。
28、：设置或检索对象的列与列之间的边框颜色4. 多列布局（Multi-column）column-span：none | allnone：不跨列all：横跨所有列设置或检索对象元素是否横跨所有列4. 多列布局（Multi-column）column-fill：auto | balanceauto：列高度自适应内容balance：所有列的高度以其中最高的一列统一设置或检索对象所有列的高度是否统一4. 多列布局（Multi-column）column-break-before：auto | always | avoid | left | right | page | column | avoid-pa
29、ge | avoid-columnauto：既不强迫也不禁止在元素之前断行并产生新列always：总是在元素之前断行并产生新列avoid：避免在元素之前断行并产生新列4. 多列布局（Multi-column）column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-columnauto：既不强迫也不禁止在元素之前断行并产生新列always：总是在元素之前断行并产生新列avoid：避免在元素之前断行并产生新列4. 多列布局（Multi-column）column-br
30、eak-inside：auto | avoid | avoid-page | avoid-columnauto：既不强迫也不禁止在元素内部断行并产生新列avoid：避免在元素内部断行并产生新列设置或检索对象内部是否断行5. 渐变（Gradient）属性描述使用简单的语法实现颜色渐变，以便UA在渲染页面自动生成图像。linear-gradient()用线性渐变创建图像。radial-gradient()用径向渐变创建图像。repeating-linear-gradient()用重复的线性渐变创建图像。repeating-radial-gradient()用重复的径向渐变创建图像。5. 渐变（Gr
31、adient） = linear-gradient() | repeating-linear-gradient() | radial-gradient() | repeating-radial-gradient()可以应用在所有接受图像的属性上。例如：background-image: linear-gradient(white, gray);list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);5. 渐变（Gradient） = linear-gradient( | to ,?
32、, +) = left | right | top | bottom = | ?：用角度值指定渐变的方向（或角度）。to left：设置渐变为从右到左。相当于: 270deg to right：设置渐变从左到右。相当于: 90deg to top：设置渐变从下到上。相当于: 0deg to bottom：设置渐变从上到下。相当于: 180deg。这是默认值5. 渐变（Gradient） = radial-gradient( | at ? , | at , ? , +) = | | left | center | right ? | | top | center | bottom ? = cir
33、cle | ellipse = | | = closest-side | closest-corner | farthest-side | farthest-corner = = | 2 = | = | ?5. 渐变（Gradient）radial-gradient(circle, #f00, #ff0, #080);radial-gradient(circle at center, #f00, #ff0, #080);radial-gradient(circle at 50%, #f00, #ff0, #080);radial-gradient(circle farthest-corner,
34、 #f00, #ff0, #080);5. 渐变（Gradient）：用百分比指定径向渐变圆心的横坐标值。可以为负值。：用长度值指定径向渐变圆心的横坐标值。可以为负值。left：设置左边为径向渐变圆心的横坐标值。center：设置中间为径向渐变圆心的横坐标值。right：设置右边为径向渐变圆心的横坐标值。：用百分比指定径向渐变圆心的纵坐标值。可以为负值。：用长度值指定径向渐变圆心的纵坐标值。可以为负值。top：设置顶部为径向渐变圆心的纵坐标值。center：设置中间为径向渐变圆心的纵坐标值。bottom：设置底部为径向渐变圆心的纵坐标值5. 渐变（Gradient）确定圆的类型circle：指
35、定圆形的径向渐变ellipse：指定椭圆形的径向渐变。 circle | ellipse 都接受该值作为 sizeclosest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角5. 渐变（Gradient） circle 接受该值作为 size：用长度值指定正圆径向渐变的半径长度。不允许负值。 ellipse 接受该值作为 size：用长度值指定椭圆径向渐变的
36、横向或纵向半径长度。不允许负值。：用百分比指定椭圆径向渐变的横向或纵向半径长度。不允许负值。用于指定渐变的起止颜色：指定颜色。：用长度值指定起止色位置。不允许负值：用百分比指定起止色位置。不允许负值5. 渐变（Gradient）repeating-linear-gradient()的语法与linear-gradient()相同repeating-linear-gradient(#f00, #ff0 10%, #f00 15%);repeating-linear-gradient(to bottom, #f00, #ff0 10%, #f00 15%);repeating-linear-grad
37、ient(180deg, #f00, #ff0 10%, #f00 15%);repeating-linear-gradient(to top, #f00, #ff0 10%, #f00 15%);5. 渐变（Gradient）repeating-radial-gradient()的语法与radial-gradient()相同repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);6. 变换（Transform）属性描述transform检索或设置对象的变换transform-origin检索或设置对象中
38、的变换所参照的原点transform-style指定某元素的子元素是否位于三维空间内perspective指定观察者与z=0平面的距离perspective-origin指定透视点的位置backface-visibility指定元素背面面向用户时是否可见6. 变换（Transform）transform：none | +transform-function list:matrix() = matrix(,5,5)matrix3d() = matrix3d(,15,15)translate() = translate(,?)translate3d() = translate3d(,)transl
39、atex() = translatex()translatey() = translatey()translatez() = translatez()rotate() = rotate()6. 变换（Transform）rotate3d() = rotate3d(,)rotatex() = rotatex()rotatey() = rotatey()rotatez() = rotatez()scale() = scale(,?)scale3d() = scale3d(,)scalex() = scalex()scaley() = scaley()scalez() = scalez()skew(
40、) = skew(,?)skewx() = skewx()skewy() = skewy()perspective() = perspective() = | 默认值：none6. 变换（Transform）transform-origin： | | left | center | right | | top | center | bottom ?：用百分比指定坐标值。可以为负值。：用长度值指定坐标值。可以为负值。left：指定原点的横坐标为left center：指定原点的横坐标为center right：指定原点的横坐标为right top：指定原点的纵坐标为top center：指定原点
41、的纵坐标为center bottom：指定原点的纵坐标为bottom6. 变换（Transform）transform-style：flat | preserve-3dflat：指定子元素位于此元素所在平面内preserve-3d：指定子元素定位在三维空间内6. 变换（Transform）perspective：none | none：不指定透视：指定观察者距离z=0平面的距离，为元素及其内容应用透视变换。不允许负值6. 变换（Transform）perspective-origin： | | left | center | right | | top | center | bottom ?：
42、用百分比指定透视点坐标值，相对于元素宽度。可以为负值。：用长度值指定透视点坐标值。可以为负值。left：指定透视点的横坐标为left center：指定透视点的横坐标为center right：指定透视点的横坐标为right top：指定透视点的纵坐标为top center：指定透视点的纵坐标为center bottom：指定透视点的纵坐标为bottom6. 变换（Transform）backface-visibility：visible | hiddenvisible：指定元素背面可见，允许显示正面的镜像。hidden：指定元素背面不可见7. 过渡（Transition）属性描述transi
43、tion-property检索或设置对象中的参与过渡的属性transition-duration检索或设置对象过渡的持续时间transition-timing-function 检索或设置对象中过渡的类型transition-delay检索或设置对象延迟过渡的时间transition复合属性。检索或设置对象变换时的过渡效果7. 过渡（Transition）transition-property：none | , * = all | none：不指定过渡的css属性all：所有可以进行过渡的css属性：指定要进行过渡的css属性7. 过渡（Transition）transition-durati
44、on： , *：指定对象过渡的持续时间检索或设置对象过渡的持续时间。如果提供多个属性值，以逗号进行分隔7. 过渡（Transition）transition-timing-function：,* = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(, start | end ?) | cubic-bezier(, , , 7. 过渡（Transition）linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease：平滑过渡。等同于贝塞尔曲线(0.25
45、, 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) step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) steps(, start | end ?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个
46、参数是可选的，默认值为end。cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在0, 1区间内7. 过渡（Transition）transition-delay： , *：指定对象过渡的延迟时间检索或设置对象延迟过渡的时间7. 过渡（Transition）transition:border-color .5s ease-in .1s,background-color .5s ease-in .1s,color .5s ease-in .1s;拆分方式：transition-property: border-color, background-color, color;
47、transition-duration: .5s, .5s, .5s;transition-timing-function: ease-in, ease-in, ease-in;transition-delay: .1s, .1s, .1s;8. 动画（Animation）属性描述animation-name检索或设置对象所应用的动画名称animation-duration检索或设置对象动画的持续时间animation-timing-function检索或设置对象动画的过渡类型animation-delay检索或设置对象动画延迟的时间animation-iteration-count检索或设置
48、对象动画的循环次数animation-direction检索或设置对象动画在循环中是否反向运动animation-fill-mode检索或设置对象动画时间之外的状态animation-play-state检索或设置对象动画的状态animation复合属性。检索或设置对象所应用的动画特效8. 动画（Animation）animation-name：,* = none | none：不引用任何动画名称：定义一个或多个动画名称(identifier标识)8. 动画（Animation）animation-duration：,*：指定对象动画的持续时间8. 动画（Animation）animation
49、-timing-function：,* = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(, start | end ?) | cubic-bezier(, , , )8. 动画（Animation）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：由快到慢。等同于贝塞
50、尔曲线(0, 0, 0.58, 1.0) ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) steps(, start | end ?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在0, 1区间内8. 动画（Animation）an