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; | 同时设置多个属性 | —— |
网友评论