空间转换
transform属性实现元素在空间内的位移、旋转、缩放等效果
由x y z三条坐标轴构成一个立体空间,x轴方向为网页从左向右, y轴方向为网页顶部到底部, z轴方向为屏幕向人脸方向.
translate实现元素空间位移效果
语法:
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值单位:
- 像素单位数值
- 百分比
perspective属性实现透视效果
可以使元素有空间变化后的效果, 例如近大远小.
perspective的设置要求：设置给使用了3d元素的最近一级的父元素.
语法:
perspective: 值.
perspective的取值范围: 400~1200px
rotate实现元素空间旋转效果
语法:
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
动画
animation添加动画效果
实现步骤:
-
定义动画
动画创建举例.png - 动画调用
animation: 动画名称 动画执行时间时间;
使用动画注意点：
1.动画的名称不能重复.
2.可参与过渡的css属性都可以参与动画.
3.动画的名称不能为 running 它是关键词.
4.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写.
animation相关属性控制动画执行过程
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
- 延迟时间：动画开始执行之前要等待的时间 s/ms
- 动画播放次数：infinite 无限次播放
- 动画播放方向：alternate 交替播放
- 速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
- 执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意：
- 动画名称和播放一次动画的时长必须写，其他属性需要就写
- forwards不能和infinite结合使用，否则不生效
- animation 里面属性值 不分先后顺序
- 当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
补间动画：
动画执行过程中，没有间隔，非常的平滑
使用的速度曲线：默认值为ease； linear匀速的
逐帧动画：
一步一步去执行的动画，中间会有间隔
使用的速度曲线：steps(正整数)
逐帧动画又叫精灵动画，逐帧动画常常配合精灵图去使用
