开发者学堂课程【前端开发 CSS 基础：CSS 过渡】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4269
CSS 过渡
内容介绍
一、过渡
二、使用代码具体演示
三、transition-timing-function 取值及演示
一、过渡
1、通过 CSS3 ,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
即为一个过程添加效果，比如上节内容中移动，想要从 x 轴 0 移动到 100px 的位置，就可以为这一过程添加样式，让它逐渐过渡到 100px 位置。
2、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
规定效果添加到哪个 CSS 属性上
规定效果的时长
属性 |
描述 |
transition |
简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property |
规定应用过渡的 CSS 属性的名称。 |
transition-duration |
定义过渡效果花费的时间。不设置则默认是0
|
transition-timing-function |
规定过渡效果的时间曲线。默认是"ease"。
|
transition-delay |
规定过渡效果何时开始。默认是0。 |
二、使用代码具体演示
打开集成开发环境，创建一个 transition 的 HTML File 文件
在 <body></body> 中输入
<div class= “first”>
效果
</div>
再来添加样式：
<style>
first{width: 100px;height: 100px;background-color: deepskyblue;
}
</style>
运行结果如图
再来添加过渡样式，transition 的四个属性中，必须要
transition-property 和 transition-duration ，现在想要这
个 div 的宽度变为原来的2倍，首先要选择属性 width ，然后规定
它的执行时间，比如 2s。
继续输入代码：
transition: width 2s;
另外也可以增加 hover 属性，hover 表示鼠标悬停时出现的样式，设置宽度变为原来的2倍，输入代码
.first: hover{width: 200px;
}
运行结果如图，当鼠标悬停时，过渡变为原来的2倍
此外不仅可以选择宽度这个属性，也可以选择高度，背景颜色等当前元素既有的属性
比如选择背景颜色，修改代码为
transition: background-color 2s;
.first: hover{background-color:blueviolet;
}
运行结果如图颜色过渡为紫色
三、transition-timing-function 取值及演示
接下来增加 transition-timing-function 属性，该属性是规定过程是以怎样一个形式来展现的，先来了解它的几种取值
transition-timing-function 取值：
1.）linear :线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
2.）ease :平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
3.）ease-in :由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
4.）ease-out :由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
5.）ease-in-out :由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
演示：
修改代码：
transition: width 5s linear;
.first: hover{width:200px;
}
运行结果是一个均匀变化的过程
再来修改
transition: width 2s ease;
运行结果是一个平滑过渡的过程
再来修改
transition: width 2s ease-in;
运行结果是一个由慢到快的过程
再来修改
transition: width 2s ease-out;
运行结果是一个由快到慢的过程
再来修改
transition: width 2s ease-in-out;
运行结果是一个由慢到快再到慢的过程
