网页高级知识点（三）

CSS3 transition动画

语句	语意
transition-property	设置过渡的属性
transition-duration	设置过渡的时间
transition-timing-function	设置过渡的运动方式
transition-delay	设置动画的延迟
transition: property duration timing-function delay	同时设置四个属性

CSS3 transform变换

语句	语意
ranslate(x,y)	设置盒子位移
scale(x,y)	设置盒子缩放
rotate(deg)	设置盒子旋转
skew(x-angle,y-angle)	设置盒子斜切
perspective	设置透视距离
transform-style flat / preserve-3d	设置盒子是否按3d空间显示
translateX、translateY、translateZ	设置三维移动
rotateX、rotateY、rotateZ	设置三维旋转
scaleX、scaleY、scaleZ	设置三维缩放
tranform-origin	设置变形的中心点
backface-visibility	设置盒子背面是否可见

CSS3 animation动画

语句	语意	可选项
@keyframes	定义关键帧动画	——
animation-name	动画名称	——
animation-duration	动画时间	——
animation-timing-function	动画曲线	1.linear 匀速2.ease 开始和结束慢速3.ease-in 开始是慢速4.ease-out 结束时慢速5.ease-in-out 开始和结束时慢6.steps 动画步数速
animation-delay	动画延迟	——
animation-iteration-count	动画播放次数	——
animation-direction	动画结束	normal 1.默认动画结束不返回2.Alternate 动画结束后返回
animation-play-state	动画状态	1.paused 停止2.running 运动
animation-fill-mode	动画前后的状态	1.none 不改变默认行为2.forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）3.backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）4.both 向前和向后填充模式都被应用
animation:name duration timing-function delay iteration-count direction;	同时设置多个属性	——