css动画详解
过渡：transition
transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
transition包括以下属性：
-
transition-property: all;如果希望所有的属性都发生过渡，就使用all。 -
transition-property: width，意思是只让盒子的宽度在变化时进行过渡 -
transition-duration: 1s;过渡的持续时间。 -
transition-timing-function: linear;运动曲线。属性值可以是：linear线性ease减速ease-in加速ease-out减速ease-in-out先加速后减速
-
transition-delay: 1s;过渡延迟。多长时间后再执行这个过渡动画。
- 上面的四个属性也可以写成综合属性：
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
2D 转换
缩放：scale
语法：
transform: scale(x, y);
transform: scale(2, 0.5);
-
x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
-
取值：大于1表示放大，小于1表示缩小。不能为百分比。
位移：translate
- 语法：
transform: translate(水平位移, 垂直位移);
transform: translate(-50%, -50%);
-
参数为百分比，相对于自身移动。
-
正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
- **应用：**让绝对定位中的盒子在父亲里居中
可以利用偏移 translate 来做，这也是比较推荐的写法：
div {
width: 600px;
height: 60px;
background-color: red;
position: absolute; /* 绝对定位的盒子 */
left: 50%; /* 首先，让左边线居中 */
top: 0;
transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】
}
旋转：rotate
- 语法：
transform: rotate(角度);
transform: rotate(45deg);
- 正值 顺时针；负值：逆时针。
- 给盒子设置
transition过渡,如果没有这行过渡的代码，旋转会直接一步到位
rotate旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性。格式如下：
transform-origin: 水平坐标 垂直坐标;
transform-origin: 50px 50px;
transform-origin: center bottom; //旋转时，以盒子底部的中心为坐标原点
3D 转换
如上图所示，伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，这样我们就建立了一个左手坐标系。
浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。
透视：perspective
-
作为一个属性，设置给父元素，作用于所有3D转换的子元素
-
作为 transform 属性的一个值，做用于元素自身。
-
例：
perspective: 500px;
旋转：rotateX、rotateY、rotateZ
rotateZ`要配合透视使用
所有的3d旋转，对着正方向去看，都是顺时针旋转。
格式：
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
移动：translateX、translateY、translateZ
translateZ必须配合透视来使用
格式：
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
动画
定义动画的步骤
-
通过@keyframes定义动画；
-
将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
-
在指定元素里，通过
animation属性调用动画。 -
在 CSS3 中定义动画的时候，也是先定义，再调用：
定义动画：
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用：
animation: 动画名称 持续时间；
animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
动画属性
animation属性的格式如下：
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
- 动画名称、持续时间两个属性，是必选项，且顺序固定。
- 动画方向属性值：normal 正常，alternate 反向。
- 运动曲线属性值可以是：linear（线性） ease-in-out（先加速后减速） steps()等。
- 如果把属性值写成**
steps()，则表示动画不是连续执行**，而是间断地分成几步执行
steps()的效果
在调用动画时，我们写成：
animation: move2 4s steps(2);
效果如下：
有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。
)的效果
在调用动画时，我们写成：
animation: move2 4s steps(2);
效果如下：
[外链图片转存中…(img-0HsH8RRz-1729836209325)]
有了属性值 steps()，我们就可以作出很多不连续地动画效果。比如时钟；再比如，通过多张静态的鱼，作出一张游动的鱼。