web前端入門到實戰(zhàn)：css3 過渡和動畫

過渡 transition

1.過渡的定義和使用

在沒有過渡屬性的時候，當(dāng)一個元素的屬性值發(fā)生變化時，瀏覽器就會將個這個元素瞬間渲染成新屬性值的樣式。例如一個定位元素top:0，動態(tài)修改成top:100px，這個元素就瞬間跑到100px的位置，有時候我們?yōu)榱诉_(dá)到某種視覺效果，希望它以動畫的形式在一定的時間內(nèi)，從舊的樣式轉(zhuǎn)變成新的樣式，而這個過程就是過渡。過渡其實就是一個簡單的動畫效果

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

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

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

transition: all 1s;

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

transition: width 1s,height 1s;

設(shè)置延遲和過渡函數(shù)

transition: width 2s ease 1s;

2.過渡的時間函數(shù)

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

以下面的代碼為例

transition: width 2s steps(4);

3.transition事件

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

學(xué)習(xí)Q-q-u-n： 784783012 ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法
（從零基礎(chǔ)開始到前端項目實戰(zhàn)教程，學(xué)習(xí)工具，職業(yè)規(guī)劃）
<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
    }

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

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

過渡事件觸發(fā)的次數(shù)與transition-property過渡屬性的個數(shù)有關(guān)。過渡屬性有幾個就會觸發(fā)幾次

transition: width 2s,height 1s;

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

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

動畫

1.動畫的定義

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

2.注冊動畫

創(chuàng)建動畫就是創(chuàng)建一個動畫名稱，里面設(shè)置了若干個關(guān)鍵幀，控制元素在不同時段的樣式的變化方向
關(guān)鍵幀可以用百分比，也可以用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.應(yīng)用動畫

語法：animation:動畫名 持續(xù)時間

.item{
    animation: move 3s;
}

4.其余屬性

animation-name:動畫名稱
animation-duration:持續(xù)時間 單位/秒
animation-delay:延遲 單位/秒
animation-timing-function: 時間曲線
animation-iteration-count:循環(huán)次數(shù) infinite為無限次
nimation-direction:動畫方向
animation-fill-mode：當(dāng)動畫完成時，或當(dāng)動畫有延遲時，要應(yīng)用的規(guī)則

解析：
動畫默認(rèn)只會執(zhí)行一次，如果想無限循環(huán)執(zhí)行下去，請設(shè)置 animation-iteration-count:infinite

animation: move 3s infinite;

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

animation: move 3s infinite alternate;

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

animation: move 6s 1s 2 both;

5.用js控制播放

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

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