Web前端开发案例教程（HTML5+CSS3）第10章CSS3动画.pptx

第10章CSS3动画德才兼备知行合一※掌握通过transition属性生成过渡动画的方法；※掌握通过transition属性生成2D和3D变形的方法；※掌握通过animation属性创建关键帧生成动画的方法。

动画属性2德才兼备知行合一10.110.210.3过渡属性第10章CSS3动画变形属性10.4案例

10.1过渡属性3德才兼备知行合一第10章CSS3动画

10.1过渡属性4德才兼备知行合一CSS3提供了强大的过渡属性，使元素从一种样式转变为另一种样式时添加效果，如颜色和形状的变换等。过渡属性包含一系列属性，主要包括transition-property、transition-duration、transition-timing-function、transition-delay。下面通过表10-1列出这些属性的基本语法及属性值。

10.1过渡属性5德才兼备知行合一表10-1过渡属性属性名作用属性值描述transition-property指定应用过渡效果的CSS属性名称none没有属性会获得过渡效果all所有属性都将获得过渡效果property定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔transition-duration定义过渡效果花费的时间time默认为0，常用单位是秒（s）或毫秒（ms）transition-timing-function定义过渡效果的速度曲线ease平滑过渡linear线性过渡ease-in由慢到快ease-out由快到慢ease-in-out由慢到快再到慢cubic-bezier特殊的立方贝塞尔曲线效果transition-delay定义过渡效果延迟时间time默认值为0，常用单位是秒（s）或毫秒（ms）transition综合设置过渡的所有属性值propertydurationtiming-functiondelay按照各属性顺序一次设置四个参数值，属性顺序不能颠倒

10.2变形属性6德才兼备知行合一第10章CSS3动画

7德才兼备知行合一10.2变形属性CSS3中，transform属性可以实现对元素的变形效果，如移动、倾斜、缩放以及翻转等。通过transform属性的变形函数能对元素进行2D或3D变形。

8德才兼备知行合一10.2变形属性常用的四种2D变形语法格式。属性名值作用描述transformtranslate(X,Y)基于X和Y坐标平移元素X表示水平移动的距离，Y表示垂直移动的距离scale(n1,n2)放大或缩小元素n1和n2表示基于元素的宽度和高度进行放大或缩小。大于1时为放大，小于1时缩小元素。第二个参数省略时，等于第一个参数值skew(angle,angle)倾斜元素两个angle分别表示在X轴和Y轴上倾斜的角度rotate(angle)旋转元素angle表示旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转表10-22D变形属性及设置

9德才兼备知行合一10.2变形属性3D变形语法格式。表10-33D变形属性及设置属性名值描述transformtranslate3d(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变形元素的透视视图

10德才兼备知行合一10.2变形属性另外，在CSS3中还包含了一些其它变形的属性，通过这些属性可以设置不同的变形效果，具体如表10-4所示。表10-4变形的其它属性属性名描述transform-origin允许改变被转换元素的位置transform-style规定被嵌套元素如何在3D空间中显示perspective规定3D元素的透视效果perspective-origin规定