过渡

过渡可以在不使用 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);}铃铛