共计 3431 个字符，预计需要花费 9 分钟才能阅读完成。
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 变动的应用