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.2transform: scale(rate)// 只写一个, 示意纵轴与横轴的缩放比雷同scale能够用于哪些方面呢？比方咱们须要对数据进行分页时，当鼠标移入哪个按钮，就进行放大展现，图示如下。
实现代码如下
// cssul { 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变动的应用