CSS學習筆記-過渡模塊

過渡模塊：
    一、過渡三要素
        1.1必需要有屬性發生變化
        1.2必須告訴系統哪一個屬性須要執行過渡效果
        1.3必須告訴系統過渡效果持續時長
    二、格式：
        div{
            width:100px;
            height:100px;
            background-color:red;
            
            transition-property:width;
            transition-duration:0.5s;
        }
        
        div:hover{
            width:300px;
        }
        (:link默認/:visited訪問後/:hover鼠標懸浮/:active長按)    愛恨原則：【L】o【v】e    【H】【a】te

    三、注意點：
        當多個屬性須要同時執行過渡效果時，用逗號隔開便可：    
            transition-property:width,background-color;
            transition-duration:5s,5s;
    
過分模塊其餘屬性：
    一、transition-dalay:2s;
        告訴系統延遲多少秒以後纔開始過渡   
    二、transition-timing-funtion:linear;
        取值:linear/ease/ease-in/ease-out/ease-in-out

   　

過渡模塊_連寫：
    一、連寫格式：
        transition:過渡屬性 過渡時長 運動速度 延遲時間;
    二、過渡連寫注意點：
        2.1若是想給多個屬性添加過渡效果，用逗號隔開便可,如：
            transition:width 1s linear 0s,background-color 1s linear 0s;
        2.2連寫的時候能夠省略後面的兩個參數，保證前面的三要素便可,如：
            transition:width 1s,background-color 1s;
        2.3若是多個屬性運動的速度/延遲的時間/持續時間都同樣，能夠簡寫爲：
            transition:all 0s;