CSS3过渡
概念：在CSS3中，我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而实现动画效果。
CSS3变形（transform)呈现的仅仅是一个结果，而CSS过渡（transition）呈现的是一个过程。这个所谓的过程，通俗来说就是一种动画变化过程，如渐渐显示，渐渐隐藏，动画快慢等
语法：
transition:过渡属性 过渡时间 过渡方式 延迟时间;
实例：指定单个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
padding:5px 10px;
margin:20px;
text-align:center;
border-radius:20px;
background-color:rgba(138,199,83,0.6);
cursor:pointer;
transition:background-color 0.3s linear 0s;
}
.a:hover{
background-color:rgba(144,83,199,0.4);
}
</style>
</head>
<body>
<div class="a">按钮</div>
</body>
</html>
运行结果
实例：指定多个属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div{
width:50px;
display:inline-block;
padding:5px 10px;
margin:20px;
text-align:center;
background-color:rgba(138,199,83,0.6);
cursor:pointer;
transition:background-color 1s linear 0s,color 0.3s ease 0s,border-radius 0.5s linear 0s;
}
.a:hover{
color:white;
background-color:rgba(144,83,199,0.4);
border-radius:20px;
}
</style>
</head>
<body>
<div class="a">按钮</div>
</body>
</html>
运行结果
实例：指定全部属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过渡</title>
<style>
*{
padding:0;
margin:0;
}
div{
width:50px;
display:inline-block;
padding:5px 10px;
margin:20px;
text-align:center;
background-color:rgba(138,199,83,0.6);
cursor:pointer;
transition:all 0.3s linear 0s;
}
.a:hover{
background-color:rgba(144,83,199,0.4);
width:100px;
border-radius:20px;
}
</style>
</head>
<body>
<div class="a">按钮</div>
</body>
</html>
运行结果
说明：凡是涉及CSS3过渡，我们都是结合:hover伪类来实现过渡效果的
transition是一个复合属性，主要包括4个子属性。
| 属性 | 说明 |
|---|---|
| transition-property | 对元素的哪一个属性进行操作 |
| transition-duration | 过渡的持续时间 |
| transition-timing-function | 过渡的速率变化方式 |
| transition-delay | 过渡的延迟时间（可选参数） |
在”实例:指定单个属性”中，属性值
/*transition复合属性*/
transition:background-color 0.3s linear 0s;
/*transition子属性*/
transition-property:background-color;
transition-duration:0.3s;
transition-timing-function:linear;
transition-delay:0s
这两者代码是等价的
过渡属性:transition-property
概念：在CSS3中，可以使用transition-property属性定义过渡效果操作的是哪一个属性.
当指定的CSS属性的值发生改变时，过渡效果才开始
语法：
transition:property:none | all | property;
属性值
| 属性值 | 说明 |
|---|---|
| none | 没有属性应用过渡效果 |
| all | 默认值，所有属性都应用过渡效果 |
| property | 应用过渡效果的属性名称列表，多个属性间以逗号分隔 |
过渡时间:transition-duration
概念：在CSS3中，transition-duration属性用于指定过渡效果持续的时间
语法：
transition-duration:time;
属性值
| 属性值 | 说明 |
|---|---|
| time | 完成过渡效果所需要的时间（以秒或毫秒记）。默认值为0，表示不出现过渡动画。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁剪。两种情况下，属性列表都保持不变 |
过渡方式:transition-timing-function
概念：在CSS3中，transition-timing-function属性用于指定过渡效果执行时速度变化的时间曲线
语法
transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
属性值
| 属性值 | 说明 | 速率 |
|---|---|---|
| linear | 规定以相同速度开始至结束的过渡效果，即”匀速“ |  |
| ease | 默认值，规定慢速开始，变快之后慢速结束的过渡效果 |  |
| ease-in | 规定速度越来越快的过渡效果 |  |
| ease-out | 规定速度越来越慢的过渡效果 |  |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |  |
| cubic-bezier(n.n,n,n) | 在cubic-bezier函数中自定义值，参数是0~1的数值 |
延迟时间:transition-delay
概念：在CSS3中，transition-delay属性用于指定执行过渡效果之前需要等待的时间
语法：
transition-delay:time;
属性值
| 属性值 | 说明 |
|---|---|
| time | 定义过渡效果属性执行之前所需要等待的时间（以秒或毫秒计）。该属性值可以为正整数、负整数或0。默认值为0，即不延迟。当取值为正整数时，过渡效果会延迟触发。当取值为负整数时，过渡效果会从该时间点开始，之前的效果会被截断。 |
实例：导航下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航菜单</title>
<style>
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
.nav{
width:150px;
height:50px;
background-color:rgb(83,199,86);
margin:20px auto;
line-height:50px;
text-align:center;
}
.list{
list-style: none;
height:0;
overflow:hidden;
/* 指定应用过渡效果的属性为height */
transition-property:height;
/* 指定过渡效果持续时间为1s */
transition-duration:1s;
/* 指定过渡效果速度变化 */
transition-timing-function:linear;
/* 指定过渡效果延迟执行 */
transition-delay:0s;
}
.list li{
background-color:lightblue;
border-bottom:1px solid red;
list-style:none;
}
.nav:hover .list{
/* 当鼠标移入导航菜单盒子时，下拉列表的高度发生变化 */
height:240px;
}
</style>
</head>
<body>
<div class='nav'>
<a href="">中国新四大发明</a>
<ul class="list">
<li><a href="">高速铁路</a></li>
<li><a href="">扫码支付</a></li>
<li><a href="">共享单车</a></li>
<li><a href="">网络购物</a></li>
</ul>
</div>
</body>
</html>
运行结果
原文链接：https://juejin.cn/post/7323203806795235362 作者：小明的Fire计划
