css3 变换 transition

.box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            opacity: 0.5;
            /* 设置哪个属性需要过渡效果 */
            transition-property: width,height;

            /* 让所有能过渡的属性，都过渡 */
            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;
        }

transition-property: 设置哪些属性要发生变换

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持
过渡。
常见的支持过渡的属性有：颜色、长度值、百分比、z-index 、opacity 、2D 变换属
性、3D 变换属性、阴影。

margin,padding

不使用过度的话，就会闪的一下变到hover设置的样式。

transition-duration

作用：设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
常用值：
1. 0 ：没有任何过渡时间 —— 默认值。
2. s 或ms ：秒或毫秒。
3. 列表：
如果想让所有属性都持续一个时间，那就写一个值。
如果想让每个属性持续不同的时间那就写一个时间的列表。

? transition-property: width,height,background-color;

?/* 分别设置时间 */

?transition-duration: 0.5s,0.5s,3s;

transition-delay
作用：指定开始过渡的延迟时间，单位： s 或ms

? transition-property: width,height,background-color;

? transition-property: width,height,background-color;

?/* 分别设置时间 */

?transition-duration: 0.5s,0.5s,3s;

?transition-delay:0 ,0,3s;

?transition 复合属性
如果设置了一个时间，表示duration ；如果设置了两个时间，第一是duration ，第二个是
delay ；其他值没有顺序要求。

transition:1s 1s linear all;