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

àì夳堔傛蜴生んèń 2021-12-05 01:17 737阅读 0赞

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

--------------------

### 文章目录 ###

*  0.主要内容
 *  1.过渡 transition
 *   *  1.1 基础
     *  1.2 举例：商品详情
 *  2. 转换 transform
 *   *  2.1 基础
     *  2.2 2D转换
     *   *  2.2.1 缩放 scale
         *  2.2.2 位移 translate
         *  2.2.3 旋转 rorate
         *  2.2.3 举例:小火箭
         *  2.2.4 举例：扑克牌
     *  2.3 3D转换
     *   *  2.3.1 旋转 rotateX、rotateY、rotateZ
         *  2.3.2 位移 translateX、translateY、translateZ
         *  2.3.3 举例：骰子（难点）
 *  3.动画 animation
 *   *  3.1 基础
     *  3.2 举例：时钟动画
     *  3.3举例：鱼在盒子游，盒子右移
 *  4.补充

# 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，是让所有属性包括宽度和背景色等均过渡