过渡
过渡可以在不使用 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;
盒子阴影 #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;}盒子阴影 #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;}盒子阴影 .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;}盒子阴影 .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);}
铃铛