关于CSS的过渡模块

过渡三要素
1.1 必须要有属性发生变化
1.2 必须告诉系统哪个属性需要执行过渡效果
1.3 必须告诉系统过渡效果持续时长

        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: red;
            /*告诉系统哪个属性需要执行过渡效果*/ 要素2
            /*transition-property: width, background-color;*/
            transition-property: opacity, height;
            /*告诉系统过渡效果持续的时长*/ 要素3
            transition-duration: 5s, 5s;

            /*transition-property: background-color;*/
            /*transition-duration: 5s;*/
        }
        /*:hover 鼠标悬空这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
     要素1  
        div:hover{
            /*width: 300px;*/
            opacity: 0;
            height: 200px;
        }
注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;

其他属性:
transition-delay  
告诉系统过渡动画需要延迟多久才开始
transition-timing-function
告诉系统过渡动画的运动的速度 
linear ease ease-in ease-out ease-in-out

过渡连写 
transition: 过渡属性 过渡时长 运动速度 延迟时间;
<style>
        *{
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;
            /*transition-property: width,height,background-color;*/
            /*transition-duration: 5s,5s,5s;*/
            /*transition: width 5s,background-color 5s,height 5s;*/
            transition: all 5s;
        }
        div:hover{
            width: 300px;
            height: 300px;
            opacity:0;
            background-color: blue;
        }
    </style>

过渡连写注意点
1 和分开写一样, 如果想给多个属性添加过渡效果也是用逗号隔开即可
2 连写的时可以省略后面的两个参数, 因为只要编写了前面的两个参数就已经满足了过渡的三要素
3 如果多个属性运动的速度/延迟的时间/持续时间都一样, 那么可以简写为
transition:all 5s;