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>