web前端入門到實戰：css3 過渡和動畫

過渡 transition

1.過渡的定義和使用

在沒有過渡屬性的時候，當一個元素的屬性值發生變化時，瀏覽器就會將個這個元素瞬間渲染成新屬性值的樣式。例如一個定位元素top:0，動態修改成top:100px，這個元素就瞬間跑到100px的位置，有時候我們為了達到某種視覺效果，希望它以動畫的形式在一定的時間內，從舊的樣式轉變成新的樣式，而這個過程就是過渡。過渡其實就是一個簡單的動畫效果

transition是簡寫之后的屬性名，它其實是4個屬性合并而成的，按順序依次是：
transition-property: 過渡屬性(默認值為all)
transition-duration: 過渡持續時間(默認值為0s)
transiton-timing-function: 過渡函數(默認值為ease函數)
transition-delay: 過渡延遲時間(默認值為0s)

注意：添加的屬性他的屬性值必須有明確的數值，例如color，left，width之類的，如果是display這種則無效

transition我們很少拆分使用，通常都是簡寫
所有屬性過渡

transition: all 1s;

多個屬性過渡,各個屬性用 逗號 隔開

transition: width 1s,height 1s;

設置延遲和過渡函數

transition: width 2s ease 1s;

2.過渡的時間函數

常用的值有：
ease - 先快后慢
linear - 勻速
ease-in - 先慢后快
steps - 將過渡時間劃分成大小相等的時間時隔來運行，通俗來說就是跳著走

以下面的代碼為例

transition: width 2s steps(4);

3.transition事件

transitionend - 過渡完成之后就會觸發這個事件
transitionstart - 過渡開始執行就會觸發 這個事件（延遲結束之后才執行）
注意：只能用addaddEventListener添加事件，不支持屬性賦值函數的形式監聽

學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃）
<script>
    var div = document.querySelector("div")
    var scale = true
    div.onclick = function(){
        if(scale){
            div.style.width = "400px"
        }else{
            div.style.width = "200px"
        }
        scale = !scale
    }

    // 這個方式監聽不支持
    div.transitionend = function(){
        console.log("過渡結束了")
    }

    // 下面的寫法才支持
    div.addEventListener("transitionend",function(){
        console.log("過渡結束了")
    })
    div.addEventListener("transitionstart",function(){
        console.log("過渡開始了")
    })
</script>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）

過渡事件觸發的次數與transition-property過渡屬性的個數有關。過渡屬性有幾個就會觸發幾次

transition: width 2s,height 1s;

div.addEventListener("transitionend",function(){
        console.log("過渡結束了") //觸發兩次
    })

如果過渡屬性是復合屬性，如border-width相當于是border-top-width、border-bottom-width、border-left-width和border-right-width這四個屬性的集合。則過渡事件觸發4次

動畫

1.動畫的定義

動畫可以理解成多段多度的集合，通過設置關鍵幀來控制樣式變化的過程。例如一個元素的寬度從200px過渡到600px，起點和終點已經固定了，能改變的無非就是事件函數，控制樣式變化的速度。在這階段中樣式始終朝著一個方向發展，不可能超出200-800的范圍。而動畫可以設置若干個關鍵幀，來控制不同時段元素樣式的走向，達到一個視覺動畫的效果

2.注冊動畫

創建動畫就是創建一個動畫名稱，里面設置了若干個關鍵幀，控制元素在不同時段的樣式的變化方向
關鍵幀可以用百分比，也可以用from/to，from代表0%,to代表100%

@keyframes move {
    0% {
        left: 20px;
        top: 20px;
    }

    40% {
        left: 600px;
        top: 0;
    }

    80% {
        left: 600px;
        top: 400px;
    }

    100% {
        left: 300px;
        top: 200px;
    }
}

3.應用動畫

語法：animation:動畫名 持續時間

.item{
    animation: move 3s;
}

4.其余屬性

animation-name:動畫名稱
animation-duration:持續時間 單位/秒
animation-delay:延遲 單位/秒
animation-timing-function: 時間曲線
animation-iteration-count:循環次數 infinite為無限次
nimation-direction:動畫方向
animation-fill-mode：當動畫完成時，或當動畫有延遲時，要應用的規則

解析：
動畫默認只會執行一次，如果想無限循環執行下去，請設置 animation-iteration-count:infinite

animation: move 3s infinite;

動畫默認只會朝著一個方向執行，即使設置了多次循環，動畫依然是用一個方向，如果想設置來回交替，請設置animation-direction:alternate

animation: move 3s infinite alternate;

動畫結束后會回到默認的樣式，例如前面的例子，動畫結束的位置是300,200，但是它馬上會退回到進入動畫前的0,0位置，如果要進行設置，animation-fill-mode屬性有幾個值可以選：
none - 動畫完成回到原先的樣式（默認）
forwards - 停留到動畫結束時的狀態
backwards - 如果動畫有延遲，元素會馬上渲染成0%設置的樣式
both:相當于（forwards + backwards）都保留

animation: move 6s 1s 2 both;

5.用js控制播放

可以用js控制animation-play-state屬性來控制動畫的播放與暫停
它有2個值：
running - 播放
paused - 暫停

學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃）
<script>
    var run = true
    var div = document.querySelector("div")
    function running(){
        if(run){
            // 如果是播放狀態就暫停
            div.style.animationPlayState = "paused"
        }else{
            div.style.animationPlayState = "running"
        }
        run = !run
    }
</script>