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
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>過渡動畫</title> <style type="text/css"> .p1{ width: 200px; height: 200px; background: green; /*變化屬性: 預設值為all指代所有的屬性(不寫,預設該元素身上所有屬性的值的更改, 都支援動畫效果) */ transition-property:all; /*多組值之間用","隔開*/ transition-property: width,background; /*持續時間長度,預設值為"0",就是沒有動畫(設定過渡動畫一定不能省略)*/ transition-duration: 2s; /*變化速率 四個值: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 */ transition-timing-function: cubic-bezier(0.4,0.2,0.5,0.7); /*延遲時間長度：延遲多久開始*/ transition-delay: 2s; /*transition: all width,background 2s cubic-bezier(0.4,0.2,0.5,0.7) 2s;*/ } /*再觸發時機中,更改你想要看屬性動畫的那個屬性的值*/ .p1:hover{ width: 500px; background: pink; height: 500px; } .p2{ width: 200px; height: 200px; background: pink; /*過渡動畫*/ transition: all 2s linear ; } .p2:hover{ /*所有的屬性都支援形變的*/ /*transform:多組形變用空格 background:多組之間用","號 */ /*形變中平移其實真正的位置沒有改變,移動就是個假象*/ /*transform: translate(300px,100px) ;*/ opacity: 0.5; /*margin-left:是真實改變*/ margin-left: 300px; } .text{ transition: 2s; height: 100px; } /*過渡動畫的focus時機*/ .text:focus{ height: 300px; } .check{ margin-top: 50px; transition: 2s; } .check:checked{ margin-top: 200px; } .p3{ width: 200px; height: 200px; background: yellow; transition: 2s; } @media only screen and (min-width:800px ) { .p3{ width: 500px; } } </style> </head> <body> <p>eg1：</p> <p class="p1"></p> <hr /> <p>eg2：</p> <p class="p2"></p> <hr /> <p>eg3：</p> <form action="###"> <!-- input:我們沒有設定寬高,就可以看到它(特殊性),對於它設定寬高 動畫的時候,避免相容性問題,一般要設定初始寬高 *所有屬性設定過渡動畫的時候,一般給該屬性設定初始值 --> <input type="text" class="text" value="" /> <br /> <input type="checkbox" class="check" /> </form> <hr / <p>eg4：</p> <!--媒體查詢時機的例子--> <p class="p3"></p> </body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
