Web前端开发- 网页设计 课件 5.6 CSS3动效新特性

单元5

CSS3新特性5.6

CSS3动效新特性主要内容C

O

N

T

E

N

T

SPART

01CSS3过渡效果PART

03CSS3动画效果PART

02CSS3变形效果CSS3过渡效果CSS3提供了强大的过渡属性transition，利用该属性可以在不使用Flash动画或者

Javascript脚本的情况下，为元素从一种样式到另一种样式的变化添加中间过渡效果。transition:

property

duration

timing-function

delay;子属性transition-property描述指定应用过渡效果的CSS属性的名称，当这些属性的属性值发生改变时，将应用过的变化效果。transition效果需要指定多少秒或毫秒才能完成。transition-durationtransition-timing-functiontransition-delay指定过渡效果执行速度变化的时间曲线。指定过渡效果执行之前需要等待的时间。CSS3过渡效果transition-timing-function属性值说明【案例5.6.1】CSS3的过渡效果示例属性值lineareaseease-inease-outease-in-out说明动画以以匀速执行。动画以慢速开始，变快之后再慢速结束。动画以以慢速开始。动画以以慢速结束。动画以以慢速开始和结束。cubic-bezier(n,n,n,n)在cubic-bezier函数中自定义动画执行速度，各参数是0至1之间的数值。CSS3变形效果CSS3新增的transform属性通过一系列变形函数，操控元素进行平移、旋转、缩放和倾斜等变形，包括2D变形3D变形。none（默认值）：表示不进行变形。transform-function：设置变形函数，可以设置1个或多个变形函数，若有多个变形函数，之间以空格分隔。transform:

none|transform-functions;CSS3变形效果常用2D变形函数函数 描述【案例5.6.2】CSS3的2D变形效果示例translate()功能：重新定义元素的二维坐标，实现元素平移的效果。语法：transform:translate

(x-value,y-value);scale

()功能：缩放元素大小，包含两个参数，分别用来定义宽度和高度的缩放比例。语法：transform:scale(x-axis,y-axis);rotate

()功能：在二维平面内将元素旋转一定的角度，正值顺时针旋转。负值逆时针旋转。语法：transform:rotate(angle);skew

()功能：将元素沿着X轴或Y轴进行一定角度的倾斜。语法：transform:skew(x-angle,y-angle);CSS3变形效果常用3D变形函数【案例5.6.3】CSS3的3D旋转效果示例函数translate3d(x,y,z)translateX(x)translateY(y)translateZ(z)scale3d(x,y,z)scaleX(x)scaleY(y)scaleZ(z)rotate3d(x,y,z,angle)rotateX(angle)rotateY(angle)rotateZ(angle)matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)描述定义3D平移定义围绕X轴的3D平移定义围绕Y轴的3D平移定义围绕Z轴的3D平移定义3D缩放定义围绕X轴的3D缩放定义围绕Y轴的3D缩放定义围绕Z轴的3D缩放定义3D旋转定义围绕X轴的3D旋转定义围绕Y轴的3D旋转定义围绕Z轴的3D旋转综合定义3D变形，使用16个值的4x4矩阵CSS3动画效果在CSS3中，使用@keyframes规则创建动画。@keyframes

animationname

{keyframes-selector{css-styles;}}语法animationname：当前动画的名称，它将作为调用动画时动画的标识，不能为空。keyframes-selector：关键帧选择器，指定当前关键帧在整个动画过程中的位置，值可以是from和to、或者百分比。其中，from和0%效果相同(表示动画的开始)，

to和100%效果相同{表示动画的结束)。css-styles：定义当前关键帧对应的动画状态，由若干

CSS样式属性刻画，各属性间用分号分隔。CSS3动画效果在CSS3中，使用animation属性调用@keyframes规则创建的动画，它是一个复合属性。animation:

name

duration

timing-function

delay

iteration-count

direction

fill-mode

play-state;子属性animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-count说明指定要绑定到选择器的关键帧的名称动画指定需要多少秒或毫秒完成设置动画将如何完成一个周期设置动画在启动前的延迟间隔。定义动画的播放次数。animation-directionanimation-fill-mode