css3过渡属性和动画效果
- css3过度属性
- 2D转换
- 3D转换
- css3制作动画
css3过度属性
作用：在不使用Flash动画或者js的情况下使用transition实现过渡效果，让当前元素只有有属性发生变化就可以控制过度动画效果
| 属性 | 简介 |
|---|---|
| transition | 简写属性，用于一个属性中设置四个过渡属性 |
| transition-property | 规定过度的css属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认为0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认ease |
| transition-delay | 规定过渡效果开始时间，默认为0 |
transition-property:
- 属性值：none表示没有过渡属性
- all表示所有变化属性都过渡
- 属性名 使用具体的属性名，多个属性名中间逗号分隔
transition-timing-function：
transform-origin
作用：改变元素的水平和垂直方向的原点位置，调整元素基准点
属性值：包含两个，中间有空格分隔
| 属性值 | 简介 |
|---|---|
| 第一个：left、right、center、px、% | 定义x轴基准点 |
| 第二个：left、right、center、px、% | 定义y轴基准 |
代码示范：
2D转换
属性名：transform
作用：对元素进行移动、缩放、旋转、拉伸。配合过渡效果实现动画
位移：translate(正左右负，正上负下)
该属性实现位移效果
| 属性值 | 简介 |
|---|---|
| translate(x,y) | x,y分别为水平，垂直方向位移，可以为px或% |
| translate(x) | 只有一个数值表示水平方向位移 |
代码示范: 缩放：scale 作用：实现元素缩放效果
| 属性值 | 简介 |
|---|---|
| scale(x,y) | x,y分别改变元素的宽高倍数 |
| scale(n) | 整体改变n倍数 |
| scaleX(n) | 改变元素宽度 |
| scaleYx(n) | 改变元素高度 |
代码示范:
旋转:rotate()
作用：实现元素旋转
书写方式：
rotate(n deg),其中deg为度数单位，正数表示顺时针，负数表示逆时针
注意：元素旋转后，xy轴也随之发生旋转
代码示范:
3D转换
transform属性也可以实现3D立体转换效果，比2D多了一条z轴
transform-style
用于设置被嵌套子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
属性值：flat：所有子元素在2D平面呈现
preserve-3d：保留3D空间
3D元素构建是需要多个元素构成，可以给这些元素的父级设置
transform-style：preserve-3d变成一个真正的3D图形
透视: 电脑显示屏是2D平面，但是3D效果是一中视觉呈现，可以通过透视实现
透视特点：近大远小
注意：并非任何情况都需要透视效果，根据开发需要进行设置，如果需要展示Z轴变化则设置透视效果
属性名：perspective
作用：设置z轴的视线焦点观察位置，实现3D效果
属性值：像素值越大观察z轴原点越远，图像效果越完整且接近原始尺寸
注意：透视属性值是要给3D变化元素的父级
3D旋转rotateX、rotateY、rotateZ（类似烤全羊架子一样旋转）
| 属性值 | 简介 |
|---|---|
| rotateX(n deg) | 定义x轴的3D旋转 |
| rotateY(n deg) | 定义y轴的3D旋转 |
| rotateZ(n deg) | 定义z轴的3D旋转 |
3D位移：translatX、translatY、translatZ
| 属性值 | 简介 |
|---|---|
| translatX(n deg) | 定义x轴的3D位移 |
| translatY(n deg) | 定义y轴的3D位移 |
| translatZ(n deg) | 定义z轴的3D位移（近大远小） |
代码示范:
css3制作动画
css3动画制作分为两步，创建动画、绑定动画
创建动画:@keyframes规则
作用：在@keyframes用于创建动画，规定了由一种样式变化到另一种样式的效果，可以改变任意多的样式和次数
需要使用%或者关键词：from和to对应0%和100%。
0%是开始，100%是完成
书写方式：
@keyframes 动画名称{ 动画过程，添加%动画细节 }
绑定动画:animation
需要将@keyframes中创建的动画捆绑到animation属性中
书写语法：
div{animation：动画名称 过渡时间 速度曲线 动画次数 延时时间}
注意: 动画名称 过渡时间必须设置
单一属性表
| 属性 | 简介 |
|---|---|
| animation-name | 规定动画名称 |
| animation-duration | 动画花费时间 |
| animation-timing-function | 动画速度曲线 |
| animation-delay | 规定动画时间开始 |
| animation-iteration-count | 播放次数，infinite无限播放 |
兼容性:一般给animation加一个 -webkit-解决兼容性问题
代码示范:
