最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置： 首頁(yè) - 科技 - 知識(shí)百科 - 正文

js如何實(shí)現(xiàn)動(dòng)畫(huà)

來(lái)源：懂視網(wǎng) 責(zé)編：小采 時(shí)間：2020-11-27 20:13:24
文檔

js如何實(shí)現(xiàn)動(dòng)畫(huà)

js如何實(shí)現(xiàn)動(dòng)畫(huà):1.css的transition。語(yǔ)法：transition: property duration timing-function delay; property:填寫(xiě)需要變化的css屬性如：width,line-height,font-size,color等;duration:完成過(guò)渡效果需要的時(shí)間（2s 或者2000ms）timing-f
推薦度：
導(dǎo)讀js如何實(shí)現(xiàn)動(dòng)畫(huà):1.css的transition。語(yǔ)法：transition: property duration timing-function delay; property:填寫(xiě)需要變化的css屬性如：width,line-height,font-size,color等;duration:完成過(guò)渡效果需要的時(shí)間（2s 或者2000ms）timing-f

1.css的transition。

語(yǔ)法：

transition: property duration timing-function delay;
property:填寫(xiě)需要變化的css屬性如：width,line-height,font-size,color等;
duration:完成過(guò)渡效果需要的時(shí)間（2s 或者2000ms）
timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）
值描述
linear勻速（等于 cubic-bezier(0,0,1,1)）。
ease從慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in慢慢變快（等于 cubic-bezier(0.42,0,1,1)）。
ease-out慢慢變慢（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out先變快再到慢（等于 cubic-bezier(0.42,0,0.58,1)）。漸顯漸隱效果
cubic-bezier(n,n,n,n)在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值。
timing-delay:動(dòng)畫(huà)效果的延遲觸發(fā)時(shí)間（2s 或者2000ms）。默認(rèn)值分別為：all 0 ease 0

transition抓住了所設(shè)置變化屬性的起始態(tài)和完成態(tài)，通過(guò)設(shè)定的速度曲線來(lái)完成動(dòng)畫(huà)?？梢陨婕暗礁鞣N變化的css屬性，默認(rèn)為all，則所有變化的屬性都會(huì)在出發(fā)時(shí)，以動(dòng)畫(huà)的形式展現(xiàn)出來(lái)。

這種動(dòng)畫(huà)方式是css3的，因此ie9以下是不支持的，其他的瀏覽器需要加前綴，并且只有兩態(tài)，不支持自定義中間的狀態(tài)。

例子：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<style type="text/css">

p

{

width:100px;

height:100px;

background:red;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

p:hover

{

width:300px;

}

</style>

<p></p>

tips：transform是一種變化屬性，該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜?？梢宰鳛閠ransition中需要變化的屬性。

　　　前綴：

　　　　　　transform:rotate(9deg);
　　　　　　-ms-transform:rotate(9deg); /* Internet Explorer */
　　　　　　-moz-transform:rotate(9deg); /* Firefox */
　　　　　　-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
　　　　　　-o-transform:rotate(9deg); /* Opera */　　

2.css3的animation屬性

語(yǔ)法：

animation: name duration timing-function delay iteration-count direction;
name:keyframe的名稱(chēng)，也就是定義了關(guān)鍵幀的動(dòng)畫(huà)的名稱(chēng),這個(gè)名稱(chēng)用來(lái)區(qū)別不同的動(dòng)畫(huà)。
duration:完成動(dòng)畫(huà)所需要的時(shí)間（2s 或者 2000ms）
timing-function:完成動(dòng)畫(huà)的速度曲線
delay：動(dòng)畫(huà)開(kāi)始之前的延遲iteration-count：動(dòng)畫(huà)播放次數(shù)
direction：是否輪流反向播放動(dòng)畫(huà)（normal:正常順序播放，alternate下一次反向播放）如果把動(dòng)畫(huà)設(shè)置為只播放一次，則該屬性沒(méi)有效果。使用animation屬性制作動(dòng)畫(huà)可以更加靈活的設(shè)置動(dòng)畫(huà)幀，通過(guò)不同keyframe（動(dòng)畫(huà)幀）的設(shè)置，實(shí)現(xiàn)很多優(yōu)雅的效果，keyframe中的百分?jǐn)?shù)是動(dòng)畫(huà)完成總時(shí)間的比例。
animation是設(shè)置總的動(dòng)畫(huà)效果，而keyframe中設(shè)置上相應(yīng)的動(dòng)畫(huà)名字，然后在keyframe中設(shè)置具體的動(dòng)畫(huà)效果。當(dāng)然由于是css3的屬性，仍然需要注意它的兼容性，加上必須的前綴。例子：
1
2
3
4
5
6
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
    


    
文檔

    

        
js如何實(shí)現(xiàn)動(dòng)畫(huà)

        
js如何實(shí)現(xiàn)動(dòng)畫(huà):1.css的transition。語(yǔ)法：transition: property duration timing-function delay; property:填寫(xiě)需要變化的css屬性如：width,line-height,font-size,color等;duration:完成過(guò)渡效果需要的時(shí)間（2s 或者2000ms）timing-f

        
推薦度：

    

    


              
        
                

            標(biāo)簽：
                        如何
                        動(dòng)畫(huà)
                        js
                    

                
            
            
 
                    

                        
  • 熱門(mén)焦點(diǎn)

                    

                    

                        
    
                            
                            
                            
                        

                        
                    

            

            
        
        
        
        

            
            

                
最新推薦

                
    
                    
                
                
                
            

            

            
            
            

                
猜你喜歡

                
    
                    
                    
                   
                    
                

            

           
            
            
           
            

                
熱門(mén)推薦

                
    
                    
                    
                

            

           
            
        

        
        
    
















    







Top