css3中有很多非常好用的特性，今天来总结一下与动画相关，包括过渡、2D变换。
首先来介绍一下过渡，过渡是在进行变化的时候进行的一个缓冲，如果没有过渡，当变更了元素的位置、大小的数据时，会一瞬间完成变化，增加了过渡之后，变化的过程会展现出来。比如以下gif，我们想要在鼠标移入盒子的时候，将盒子的宽和高增大一倍，并且更改颜色，没有过渡和过渡明显在用户体验上就不一样。
过渡的写法也简单，只需要在变化的基础上增加一个 transition 就行
transition: 过渡属性 过渡时间 过渡曲线 延迟时间
(1) 过渡属性，可以设置 宽度、高度、transform等，当有多个过渡效果时，可以用逗号隔开，或者用all来代表所有效果 (必写)
(2) 过渡时间，单位是s，表示花多久的时间达到变化后的效果 (必写)
(3) 过渡曲线，默认 ease，即逐渐慢，还有以下选项可以选择
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
(4) 延迟时间，表示推迟多久执行过渡效果，默认0s，即不延迟，可以自定义
过渡曲线不是很好理解，这里演示一下 ease、ease-in、ease-out、ease-in-out的区别
了解完过渡的语法之后，如上图的过渡效果，就可以这样来定义，创建一个空的div标签，然后为它定义宽高背景色
.box {
width: 100px;
height: 100px;
background-color: pink;
// 此处用来定义过渡, 默认的内容可以省略, 实际为 transition: all 1s ease 0s
transition: all 1s;
}
.box:hover {
width: 200px;
height: 200px;
background-color: skyblue
}
除了改变宽高，如果我们需要移动元素的位置，这时候该怎么做呢？有两种方式帮我们实现这一效果，以下示例1s后向分别在x和y轴移动100px方式一, 直接修改top/left的值
// css代码
.box {
position: relative;
top: 0;
left: 0;
background-color: pink;
height: 100px;
width: 100px;
transition: all 1s; // 增加过渡, 使变化不那么突兀
} // html代码
<div class="box"></div> // js代码
const box = document.getElementsByClassName('box')[0]
setTimeout(()=>{
box.style.left = "100px"
box.style.top = "100px"
},1000)
方式二，通过css3提供的2D变换属性，transform，移动元素通过 translate来实现
// translate语法
transform: translate(x, y)
// 括号里的两个属性分别为x轴方向和y轴方向 // 只需要在x轴移动
transform: translateX(x轴移动的距离) // 只需要在y轴移动
transform: translateY(y轴移动的距离) // 移动自身宽高的一半, 可以用来实现垂直水平居中
transform: translate(50%, 50%)
需要注意的是，x轴往右是正方向，y轴向下是正方向
上述需求的实现方法
// css代码
.box {
transform: translate(0,0);
background-color: pink;
height: 100px;
width: 100px;
transition: all 1s; // 增加过渡, 使变化不那么突兀
} // html代码
<div class="box"></div> // js代码
const box = document.getElementsByClassName('box')[0]
setTimeout(()=>{
box.style.transform = "translate(100px, 100px)"
},1000)
那既然原来就有可以进行移动的方法，为什么css3还新增一种移动方式，他们两个有什么不同呢？要了解他们之间的不同，就要先了解重绘重排的概念。
按照以前通过绝对定位/相对定位的方式移动元素会造成浏览器的重绘和重排，而css3新增的transform只会重绘而不会重排，我们可以通过谷歌浏览器中的 preformance 来观察到这一差别。
浏览器进行布局和绘制都是需要一定的时间，大量的重绘重排会影响程序的性能，所以如果在没有兼容性要求的情况下，我们都可以通过translate来改变元素的位置。
那么translate可以应用到什么样的场景下呢，可以试想一下，在一些PC端电商项目中，鼠标移入某个商品，该商品就可能出现向上/下移动的动画，表示你的鼠标正移入到此处，如果鼠标移开，那么商品就恢复原来的位置。图示效果如下。
实现的代码结合transform进行移动和transition实现过渡效果即可。
img {
margin: 100px;
width: 200px;
transition: transform .6s
}
img:hover {
transform: translate(0, 50px);
}
transform还有两个好用的属性，分别是scale缩放和rotate旋转，先来说说scale缩放，如果没有缩放，我们想让一个元素变大2倍，可以直接更改元素的宽高，那缩放和直接修改宽高相比，除了和以上的translate一样不会造成重排，还有一点就是不需要设置为绝对定位，它也不会挤压其它元素，而且它会沿着自己的正中心进行缩放，这个缩放的中心位置也可以自行通过 transform-origin 来设置，区别见下图。
scale缩放的语法
transform: scale(x, y)
// x和y分别表示横轴和纵轴的缩放比例, 用数字表示, 比如0.8 1.2 transform: scale(rate)
// 只写一个, 表示纵轴与横轴的缩放比相同
scale可以用于哪些方面呢？比如我们需要对数据进行分页时，当鼠标移入哪个按钮，就进行放大展示，图示如下。
实现代码如下
// css
ul {
display: flex;
} li {
list-style-type: none;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
border-radius: 50%;
text-align: center;
margin: 10px;
cursor: pointer;
transition: transform .1s;
} li:hover {
transform: scale(1.3)
} // html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
最后一个transform的属性是旋转，这也是一个非常好用的属性，语法如下
transform: rotate(deg)
// deg表示旋转度数
使用rotate可以模拟各个方向的箭头，当展开或者收起时，箭头的方向进行变化
实现代码如下
div {
position: relative;
border: 1px solid #000;
width: 260px;
height: 30px;
margin: 100px auto;
}
div::after{
position: absolute;
top: 6px;
right: 10px;
display: block;
content: "";
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 1s;
}
div:hover::after{
transform: rotate(225deg) translate(-6px, -4px); // transform属性可以累加使用
}
以上是过渡和2D变化的结合使用，下一篇文章总结动画和3D变化的使用
