动画

动画

transition 过渡

​ transition-property: css属性/none/all 默认all
​ transition-duration: 过渡时间 秒
​ transition-timeting-function:过渡动画类型 默认ease
​ linear: 线性过渡 等同于贝塞尔曲线(0.0,0.0,1.0,1.0)两个坐标
​ 剩下的查api
​ transition-delay: 过渡延迟时间 秒

animation

执行次数 暂停 fillmode 方向 delay

​ @keyframes name{ }定义一个关键帧容器 兼容性问题
​ animation-count: 执行次数 infinite
​ animation-play-state: 暂停 running/paused 兼容性差
​ animation-fill-mode:
​ none: 默认 不设置动画之外的状态
​ forwards: 结束的时候设置为最后一帧的状态
​ backwards: 开始的时候设置为第一帧的状态
​ both:设置对象状态为动画结束或开始的状态
​ animation-direction:
​ reverse: 倒着走
​ alternate:先正再反 持续执行
​ alternate:先反再正 持续执行
​ animation-delay: 动画等待 在运动开始的时候等待

step

​ 是timeing-function里面的一个属性值
​ steps(count,end); count为每一帧的改变需要几步
​ start:保留下一帧的状态，直到这段动画结束 视觉上第一帧不显示
​ end:保留当前帧状态直到这段动画结束 视觉上最后一 帧不显示
​ steps(1,end) === step-end
​ steps(1,start) === step-start

应用：利用视觉效果
	跑马
	时钟
	自动打字

transform 变换

1.rotate(角度值) 绕z轴
单位deg一度 grad一弧度 turn一圈
rotateX X轴
rotateY Y轴
rotateZ Z轴
图片变动时 三个两个轴也跟着转 旋转顺序不一样,结果不一样

2.rorate3d(x,y,z,旋转度数)
(x,y,z)从原点射出一条经过该点的射线作为新的旋转轴

3.scale(x,y,z) 伸缩的是此元素的变化坐标轴的刻度
scale是叠加操作

4.skew(x,y) 倾斜角度
坐标轴倾斜了 其刻度也被拉伸了

5.translate(x,y,z) 平移 百分比相对自身
轴也跟着动

6.transform-style:persever 3d;
给显示的元素,的直接父级加

7.backface-visbility 是否显示背面
默认visible hidden

transform-origin 变换中心

​ 圆心坐标相对图片
​ transform-origin:x y 平面旋转中心

​ transform-origin:x y z 空间旋转中心

perspective 景深

​ 相当于视觉距离 越近越大 越远越小
​ 给父级加 相当于从一个角度看所有的
​ 给自己加 相当于给每一个自身加一个景深

​ perspective-origin: 指定视角的位置

​ 设置了景深之后,如果自己没设置高度，不能被子元素撑起来