CSS的过渡属性

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

属性名：transition

常见取值：

• all 1s 所有能过渡的属性都过渡，过渡时间为1秒
• width 1s 只有width有过渡，过渡时间为1秒
• width 1s, background-color 2s; 只有width和bgc过渡，过渡时间分别为1秒和2秒

写法示例：

    div {
            width: 200px;
            height: 200px;
            background-color: red;
            transition: width 1s, background-color 2s;
        }
        
        div:hover {
            width: 800px;
            background-color: blue;
        }

注意点：

1. 给过渡需要：默认状态和hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加。
3. transition属性设置在不同状态中，效果不同 

• • ▶给默认状态设置，鼠标移入移出都有过渡效果
  • ▶给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果