【CSS3动画】过渡 transition、转换transform与动画animation

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web
非商业用途自由转载，保持署名，注明出处！

---

0.主要内容

1.过渡： transition（ 美 [trænˈzɪʃn] ）
2.转换： transform

• 2D转换
• 3D转换

3.动画：animation（ 美 [ˌænɪˈmeɪʃn]）

1.过渡 transition

1.1 基础

• 目的：让改变不那么突兀，慢慢进行，一般放在盒子里，与鼠标悬停伪类一起使用，但在悬停前的盒子内设置。而悬停后的盒子则设置改变后的样式。

/*all表示所有，可以仅设置宽、高，1s表示持续时间。linear表示线性变化，0s表示延迟时间再执行*/
transition: all 1s linear 0s;

• 注意：
  1.原盒子位置不变，鼠标悬停后根据悬停中设置的宽高决定是扩张还是收缩，若扩张的话沿右和下为正方向进行改变，收缩则反方向；
  2.鼠标离开后同样根据设置的过渡条件恢复原状；
  3.一般只设置前2项参数。

1.2 举例：商品详情

• 需求1：开始先隐藏，悬停时再出现
• 求解1：开始：父盒子： overflow: hidden; //将多余的部分隐藏；span部分设置绝对定位，高度为80px，但定位在底部-80px处，因为父盒子加了隐藏，所以看不见。然后悬停时设置绝对定位为距离底部为0px，即出现。为了改变不突兀，故在悬停前的**span（ [spæn]）**加了过渡。
• 需求2：点击父盒子，整体上移。
• 求解2：设置绝对定位，距离顶部0px变为-5px。悬停前的父盒子也设置过渡。可以在悬停后设置如下的阴影效果：

box-shadow: 0 0 15px #AAA;

2. 转换 transform

2.1 基础

1.转换需要结合悬停，过渡；
2.转换包括2D转换，3D转换：

• 2D转换：缩放scale（[skeɪl]），位移translate（ [trænzˈleɪt]），旋转 rotate（ [ˈroʊteɪt]）
• 3D转换：旋转 rotateX、rotateY、rotateZ，位移 translateX、translateY、translateZ

3.多种属性可以结合使用。

2.2 2D转换

2.2.1 缩放 scale

• 一般左上部位不改变位置，除非改变定位效果。因此，过渡可能会挤压其他盒子。但是缩放不会影响其他盒子。
• 缩放需要和过渡、悬停结合使用，若水平扩大2倍，垂直方向缩短一半，则悬停后的css可以如下设置：

  transform: scale(2, 0.5);

2.2.2 位移 translate

• 若水平方向向左位移宽度的一半，向上位移高度的一半，设置如下代码：

transform: translate(-50%, -50%);

2.2.3 旋转 rorate

• 旋转方向：以竖直向上为起始方向，顺时针旋转

 transform: rotate(45deg); 

2.2.3 举例:小火箭

• 初始状态：设置绝对定位，并设置位移位置和角度，由于悬停前后的角度相同，故没有旋转的效果，只有火箭角度呈45度。过渡设置为：transition:all 1s ease-in;其中ease-in表示加速。

transform:translate(-600px ,200px) rotate(45deg);

• 鼠标悬停页面后（因为火箭初始位置看不见）， .rocket设置如下，在这里.rocket为火箭图片的class，由于设置了绝对定位，因此可以设置宽高。

  body:hover .rocket{
            transform:translate(500px,-500px) rotate(45deg);
        }

2.2.4 举例：扑克牌

• 扑克牌是叠在一起的在初始状态时，因此需要用到绝对定位，每张图均离盒子距离为0.
• 以盒子底部为坐标原点，作为转换（旋转）原点

 transform-origin: center bottom;

• 在鼠标悬停父盒子后，每张图片设置不同的旋转角度，则结果就是扑克盘展开成扇形图状。
• 悬停可以选择过渡的对象，也可以选择其父

2.3 3D转换

2.3.1 旋转 rotateX、rotateY、rotateZ

• 旋转方向：右、下分别为x、y轴正方向，z轴垂直页面向外为其正方向，左手大拇指指向正方向，其余指头弯曲，弯曲的方向即旋转的方向。
• 绕x轴旋转代码如下，其余类似。

transform: rotateX(360deg);

• z轴旋转需要在悬停前父盒子加透视现象，否则没用：

perspective: 200px;

2.3.2 位移 translateX、translateY、translateZ

transform: translateZ(100px);

z轴悬停前的父盒子加透视。

2.3.3 举例：骰子（难点）

• 不需要加悬停，自动变换。因此对每个div通过旋转改变角度，一共6个div，存放于父盒子.box中，主要对父盒子.box设置动画效果。
• 设置动画函数xz：表示从0%旋转到100%的位置，即x与y轴均旋转了360度

 @keyframes xz {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

• .box设置

transform-style: preserve-3d;//让盒子保持3D效果
animation: xz 8s linear infinite;//调用动画效果：旋转函数，持续时间，线性（匀速），无限循环。一般只设置前2个参数

• 左右div设置旋转中心分别为水平靠左和水平靠右，如：

  transform-origin: left;

3.动画 animation

3.1 基础

• 在父盒子进行调用动画函数，若针对对象为插入的背景图，则该背景图是儿子
• 通过 @keyframes设置函数，可以向上一组设置一组动画，也可以设置多组动画。如：

 0% {}
 25%{}
 ······
 100%{}

• 位移内容为坐标数，如表示位移至（500px,0）的位置

 transform: translateX(500px) translateY(0px);

3.2 举例：时钟动画

• 第3个参数设置为steps(60)，表示在设定时间内通过60步达到。如钟摆，函数部分为：

 0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }

3.3举例：鱼在盒子游，盒子右移

• html：设置两个div，父.sharkBox，子.shark
• 需求1：鱼在盒子游

1 .shark内插入背景图，则成为背景图的父亲，故设置动画函数：

height: 270px; /* 盒子的宽高是一帧的宽高 */
animation: sharkRun 1s steps(8) infinite; 

2 动画函数：270*8=2160px;

 0% {
            }
            100% {
                background-position: left -2160px; /* 动画结束时，让图片位于最底部？ */
            }

• 需求2：盒子右移

1 .sharkBox调用动画函数

 animation: sharkBoxRun 10s linear infinite;

2动画函数

 0% {
                transform: translateX(-600px);
            }

            100% {
                transform: translateX(3000px);
            }

4.补充

• transition第3个参数除了linear，还有：ease 减速；ease-in 加速；ease-out 减速； ease-in-out 先减再加
• transition第1个参数为all，是让所有属性包括宽度和背景色等均过渡