CSS3 动画与过渡详解-CSDN博客

详细内容：https://www.cnblogs.com/qianguyihao/p/8435182.html

一般用来过渡，没有时间轴得概念，只触发一次，没有中间件状态

transition 包括以下属性：

transition-timing-function: linear; 运动曲线。属性值可以是：

 linear 线性
 ease 减速
 ease-in 加速
 ease-out 减速
 ease-in-out 先加速后减速

综合属性：

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;

四大特征：旋转位移变形缩放

缩放：scale
格式：

 transform: scale(x, y);
 transform: scale(2, 0.5);
 参数解释：
 x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数
 取值：大于1表示放大，小于1表示缩小。不能为百分比。

位移：translate
格式：

 transform: translate(水平位移, 垂直位移);
 transform: translate(-50%, -50%);
 参数解释：
 参数为百分比，相对于自身移动。
 正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。

旋转：rotate
格式：

 transform: rotate(角度);
 transform: rotate(45deg);
 参数解释：
 正值 顺时针；负值：逆时针。

transform-origin属性：默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点

transform-origin: 水平坐标 垂直坐标;

transform-origin: 50px 50px;

transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点

案例：扑克牌

1. 旋转：rotateX、rotateY、rotateZ

旋转的方向：左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向

格式：

transform: rotateX(360deg);    //绕 X 轴旋转360度

transform: rotateY(360deg);    //绕 Y 轴旋转360度

transform: rotateZ(360deg);    //绕 Z 轴旋转360度

2. 移动：translateX、translateY、translateZ

格式：

transform: translateX(100px);    //沿着 X 轴移动

transform: translateY(360px);    //沿着 Y 轴移动

transform: translateZ(360px);    //沿着 Z 轴移动

3. 透视：perspective

格式有两种写法：

4. 3D呈现（transform-style）

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下：

transform-style: preserve-3d;     //让 子盒子 位于三维空间里

transform-style: flat;            //让子盒子位于此元素所在的平面内（子盒子被扁平化）

1、定义动画的步骤
（1）通过@keyframes定义动画；

（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；

（3）在指定元素里，通过 animation 属性调用动画。

在 js 中定义一个函数的时候，是先定义，再调用：

  js 定义函数：
    function fun(){ 函数体 }

 调用：
 	fun();

在 CSS3 中定义动画的时候，也是先定义，再调用：

 定义动画：
    @keyframes 动画名{
        from{ 初始状态 }
        to{ 结束状态 }
    }

 调用：
  animation: 动画名称 持续时间；

animation属性的格式如下：

animation: 定义的动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。(infinite 表示无限次)

animation: move1 1s  alternate linear 3;

animation: move2 4s;

（1）动画名称：

animation-name: move;

（2）执行一次动画的持续时间：

animation-duration: 4s;

（3）动画的执行次数：

animation-iteration-count: 1;       //iteration的含义表示迭代
属性值infinite表示无数次。

（3）动画的方向：

animation-direction: alternate;
属性值：normal 正常，alternate 反向。

（4）动画延迟执行：

animation-delay: 1s;

（5）设置动画结束时，盒子的状态：

animation-fill-mode: forwards;
属性值： forwards：保持动画结束后的状态（默认）， backwards：动画结束后回到最初的状态。

（6）运动曲线：

	animation-timing-function: ease-in;
	属性值可以是：linear ease-in-out steps()等。

注意，如果把属性值写成steps()，则表示动画不是连续执行，而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。

steps()的效果

	animation: move2 4s steps(2);

css3动画