过渡
过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式
1. transition-property
作用:定义哪个属性需要过渡，只有在该属性中定义的属性(比如宽、高、颜色等)才会以有过渡效果。
常用值:.
none : 不过渡任何属性
all:过渡所有能过渡的属性。
具体某个属性名，若有多个以逗号分隔,例如: width,heigth，
不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。常见的支持过渡的属性有: 颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影。
2.transition-duration
作用:设置过渡的持续时间，即:一个状态过渡到另外一个状态耗时多久。
常用值:
0:没有任何过渡时间 -- 默认值。
s或ms :?秒或毫秒。
列表：如果想让所有属性都持续一个时间，那就写一个值。
如果想让每个属性持续不同的时间那就写一个时间的列表。
3. transition-delay
作用: 指定开始过渡的延退时间，单位: s或ms
4. transition-timing-function
作用:设置过渡的类型
常用值:
1. ease: 平滑过渡-- 默认值
2. linear : 线性过渡
3.ease-in:慢->快
4.ease-out:快->慢
5.ease-in-out :慢->快->慢
6 step-start : 等同于 steps(1， start)
7. step-end : 等同于 steps(1， end)
8. steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是 start 或 end，指定每一步的值发生变化的时间点。第二个参数默认值为 end。
9. cubic-bezie(number,number,number,number): 特定的贝塞尔曲线类型
过渡复合属性：transition:3S ?all ??0.5s ??linear;
过渡的四个属性：
transition-property
transition-duration
transition-delay
transition-timing-function
5.transition 复合属性
如果设置了一个时间，表示 duration;如果设置了两个时间，第一是 durat1on，第二个是 delay; 其他信没有顺序要求。
transition:1s 1s limear all;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
#box1{
width:200px;
height:200px;
background:orange;
/*设置哪个属性需要过渡效果*/
/*transition-property:width,height,background-color;*/
/*让所有能过渡的属性，都过渡*/
transition-property: all;
/*分别设置时间*/
/*transition-duration：1s,1s,1s;*/
/*设置一个时间，所有人都用*/
transition-duration: 1s;
}
#box1:hover{
width:400px;
height:400px;
background-color:green;
}
</style>
<body>
<div id="box1"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
#box1{
width:200px;
height:200px;
background:orange;
/*设置哪个属性需要过渡效果*/
/*transition-property:width,height,background-color;*/
/*让所有能过渡的属性，都过渡*/
transition-property: all;
/*分别设置时间*/
/*transition-duration：1s,1s,1s;*/
/*设置一个时间，所有人都用*/
transition-duration: 1s;
}
#box1:hover{
/*能过渡的属性*/
width:400px;
height:400px;
background-color:green;
transform:rotate(45deg);
box-shadow: 0px 0px 20px black;
opacity:1;
}
</style>
<body>
<div id="box1"></div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
.outer{
width:1000px;
height:100px;
border:1px solid black;
}
.inner{
width:100px;
height:100px;
background-color:orange;
transition:3s all border-left-width.5s linear;
}
/*效果是把鼠标放到父元素上子元素的宽度会变得和父元素一样*/
.outer:hover .inner{
width:1000px;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
.outer{
width:400px;
height:224px;
position:realtive;
overflow:hidden;
}
.mask{
width:400px;
height:224px;
background-color:black;
color:white;
position: absolute;
top:0;
left:0;
text-align:center;
line-height:224px;
font-size:100px;
opacity:0;
transition:1s linear;
}
/*单独加过渡*/
img{
transition:1s linear;
}
.outer:hover .mask{
opacity:0.5;
}
.outer:hover .img{
transform:scale(1.6) rotate(20deg);
}
</style>
<body>
<div class="outer">
<img src="img/2.png" alt="">
<div class="mask">铃铛</div>
</div>
</body>
</html>