動畫分為: 1.css3動畫:(動畫性能遠高於js) 1).過渡動畫(transition) 2).關鍵幀動畫(@keyframes,animation) 2.js動畫: 過渡動畫(transition) 語法: (所有時長單位都是秒） 1.變化屬性(transition-property(屬性名) ...
動畫分為:
1.css3動畫:(動畫性能遠高於js)
1).過渡動畫(transition)
2).關鍵幀動畫(@keyframes,animation)
2.js動畫:
過渡動畫(transition)
語法: (所有時長單位都是秒）
1.變化屬性(transition-property(屬性名))
2.持續時長(transition-duration(持續時長))*該屬性必須有(預設時間為"0")
3.變化曲線(transition-timing-function)
4.延遲時長(transition-delay)
*當失去觸發時機的時候,還會動畫返回原來的狀態
transition-timing-function：變化速率
1.ease(預設值):先快再快再慢
2.ease-in:淡入(動畫剛開始的時候變化慢)
3,ease-out:淡出(動畫快結束的時候變化慢)
4.ease-in-out:淡入淡出
5.linear:勻速變化
6.cubic-bezier:貝塞爾曲線,所有的變化都可以用貝塞 爾曲線來代替 cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的範圍都是0~1
貝塞爾曲線圖：（下麵的例子會提到，具體不做詳解）
過渡動畫沒有自己的觸發時機,只有以下幾種,可以觸發過渡動畫:
1.:hover(最常用)
2.:focus
3.:checked(多選輸入框被勾選的狀態)
4.媒體查詢(@media screen and(條件){樣式})
5.js
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>過渡動畫</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 background: green; 11 /*變化屬性: 12 預設值為all指代所有的屬性(不寫,預設該元素身上所有屬性的值的更改, 13 都支持動畫效果) 14 */ 15 transition-property:all; 16 /*多組值之間用","隔開*/ 17 transition-property: width,background; 18 /*持續時長,預設值為"0",就是沒有動畫(設置過渡動畫一定不能省略)*/ 19 transition-duration: 2s; 20 /*變化速率 21 四個值:1.ease(預設值):先快再快再慢 22 2.ease-in:淡入(動畫剛開始的時候變化慢) 23 3,ease-out:淡出(動畫快結束的時候變化慢) 24 4.ease-in-out:淡入淡出 25 5.linear:勻速變化 26 6.cubic-bezier:貝塞爾曲線,所有的變化都可以用貝塞 27 爾曲線來代替 28 cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的範圍 29 都是0~1 30 */ 31 transition-timing-function: cubic-bezier(0.4,0.2,0.5,0.7); 32 /*延遲時長：延遲多久開始*/ 34 transition-delay: 2s; 35 /*transition: all width,background 2s cubic-bezier(0.4,0.2,0.5,0.7) 2s;*/ 36 } 37 /*再觸發時機中,更改你想要看屬性動畫的那個屬性的值*/ 38 .div1:hover{ 39 width: 500px; 40 background: pink; 41 height: 500px; 42 } 43 .div2{ 44 width: 200px; 45 height: 200px; 46 background: pink; 47 /*過渡動畫*/ 48 transition: all 2s linear ; 49 } 50 .div2:hover{ 51 /*所有的屬性都支持形變的*/ 52 /*transform:多組形變用空格 53 background:多組之間用","號 54 */ 55 /*形變中平移其實真正的位置沒有改變,移動就是個假象*/ 56 /*transform: translate(300px,100px) ;*/ 57 opacity: 0.5; 58 /*margin-left:是真實改變*/ 59 margin-left: 300px; 60 } 61 .text{ 62 transition: 2s; 63 height: 100px; 64 } 65 /*過渡動畫的focus時機*/ 66 .text:focus{ 67 height: 300px; 68 } 69 .check{ 70 margin-top: 50px; 71 transition: 2s; 72 } 73 .check:checked{ 74 margin-top: 200px; 75 } 76 77 78 .div3{ 79 width: 200px; 80 height: 200px; 81 background: yellow; 82 transition: 2s; 83 } 84 @media only screen and (min-width:800px ) { 85 .div3{ 86 width: 500px; 87 } 88 } 89 </style> 90 </head> 91 <body> 92 <p>eg1：</p> 93 <div class="div1"></div> 94 <hr /> 95 96 <p>eg2：</p> 97 <div class="div2"></div> 98 <hr /> 99 100 <p>eg3：</p> 101 <form action="###"> 102 <!-- 103 input:我們沒有設置寬高,就可以看到它(特殊性),對於它設置寬高 104 動畫的時候,避免相容性問題,一般要設置初始寬高 105 *所有屬性設置過渡動畫的時候,一般給該屬性設置初始值 106 --> 107 <input type="text" class="text" value="" /> 108 <br /> 109 <input type="checkbox" class="check" /> 110 </form> 111 <hr / 112 113 <p>eg4：</p> 114 <!--媒體查詢時機的例子--> 115 <div class="div3"></div> 116 </body> 117 </html>
