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

第10章 CSS3动画 ※ 掌握通过transition属性生成过渡动画的方法； ※ 掌握通过transition属性生成2D和3D变形的方法； ※ 掌握通过animation属性创建关键帧生成动画的方法。 动画属性 2 10.1 10.2 10.3 过渡属性 第10章 CSS3动画 变形属性 10.4 案例 10.1 过渡属性 3 第10章 CSS3动画 4 CSS3提供了强大的过渡属性，使元素从一种样式转变为另一种样式时添加效果，如颜色和形状的变换等。过渡属性包含一系列属性，主要包括transition-property、transition-duration、transition-timing-function、transition-delay。 下面通过表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 综合设置过渡的所有属性值 property duration timing-function delay 按照各属性顺序一次设置四个参数值，属性顺序不能颠倒 10.2 变形属性 6 第10章 CSS3动画 7 CSS3中，transform属性可以实现对元素的变形效果，如移动、倾斜、缩放以及翻转等。通过transform属性的变形函数能对元素进行2D或3D变形。 8 常用的四种2D变形语法格式。 属性名 值 作用 描述 transform translate(X,Y) 基于X和Y坐标平移元素 X表示水平移动的距离，Y表示垂直移动的距离 scale(n1,n2) 放大或缩小元素 n1和n2表示基于元素的宽度和高度进行放大或缩小。大于1时为放大，小于1时缩小元素。第二个参数省略时，等于第一个参数值 skew(angle,angle) 倾斜元素 两个angle分别表示在X轴和Y轴上倾斜的角度 rotate(angle) 旋转元素 angle表示旋转的角度，正数表示顺时针旋转，负数表示逆时针旋转 表10-2 2D变形属性及设置 9 3D变形语法格式。 表10-3 3D变形属性及设置 属性名 值 描述 transform 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 变形元素的透视视图 10 另外，在CSS3中还包含了一些其它变形的属性，通过这些属性可以设置不同的变形效果，具体如表10-4所示。 表10-4 变形的其它属性 属性名 描述 transform-origin 允许改变被转换元素的位置 transform-style 规定被嵌套元素如何在3D空间中显示 perspective 规定3D元素的透视效果 perspective-origin 规定3D元素的底部位置 backface-visibility 定义元素在不面对屏幕时是否可见 10.3 动画属性 11 第10章 CSS3动画 12 CSS3除了支持过渡和变形动画外，还可以通过animati