一文搞懂css 2D动画效果

• 一、过渡动画效果简述 transition:

• • 1、代码示例

• 2、效果展示

• 二、定位translate

• • 1、2D定位 transform: translate(50%, 50%);
• • ①.代码示例

• ②.效果展示

• 2、2D定位 transform: translateY(-20px);【抬高】

• • ①.代码示例

• ②.效果展示

• 三、2D旋转 transform: rotate(180deg);

• • 1、代码示例

• 2、效果展示

• 四、2D放缩

• • 1、2D放缩 transform: scale(50%, 50%);
• • ①.代码示例

• ②.图片展示

• 2、2D放缩 transform: scale(1.25);

• • ①.代码示例

• ②.图片展示

• 总结

---

前言

====================================================================

今天要介绍的是2D动画效果,主要包括2D动画的定位、旋转、缩放。

---

先来一波动画效果展示,后面会具体到每一个案例。

进度条

盒子旋转

盒子放缩

一、过渡动画效果简述 transition:

========================================================================================

1、代码示例

---

transition: all .5s 1s;

过渡属性,过渡时间,过渡曲线,停止间隔（上述没有书写过渡函数,过渡函数不常使用）

代码如下：

2、效果展示

---

二、定位translate

===============================================================================

1、2D定位 transform: translate(50%, 50%);

---

百分比是相对于盒子左上角为原点,向右向下移动了多少。

可以将transform加在子代元素中,也可以加在hover内。

①.代码示例

代码如下：

②.效果展示

背景盒子为浅蓝色,中间盒子为棕色,中间盒子大小为原来盒子的50%

而棕色盒子向右下偏移的长度又为棕色盒子的50%

2、2D定位 transform: translateY(-20px);【抬高】

---

在x轴或y轴移动一定的像素，有个兄弟是translateY

在这里就是进行了竖直方向的移动

①.代码示例

代码如下：

Hello

Hello

Hello

Hello

Hello

②.效果展示

三、2D旋转 transform: rotate(180deg);

===================================================================================================

旋转180deg意思就是旋转180度（顺时针）

transform-origin: left bottom;

这句话的意思是,以左下角为中心点（因为旋转默认是以中心为旋转点的）

1、代码示例

---

代码如下：