CSS3動(dòng)畫效果transition

番茄西紅柿發(fā)布于2019-04-23 11:57 / 990人閱讀

摘要：鼠標(biāo)移動(dòng)觸發(fā)的動(dòng)畫效果。第二個(gè)參數(shù)就是動(dòng)畫耗時(shí)，默認(rèn)是，所以必不可少，要不然沒有動(dòng)畫效果，沒什么可說的。多個(gè)樣式各個(gè)樣式用逗號(hào)隔開即可寬度完成變化，高度延遲執(zhí)行，完成變化，背景色完成變化效果如下未完待續(xù)

1.transition的瀏覽器支持情況

IE10+支持，IE6789都不支持！目前，其他瀏覽器最新版本都支持，不需要再加前綴 -webkit- 之類的了

2. 還是一步一步說說怎么用transition吧

頁面只有一個(gè)div，其css如下：

鼠標(biāo)移動(dòng)到div上，div立刻變寬為300px，效果如下：

現(xiàn)在在div身上加上 transition:0.5s;

效果如下：

原來是瞬間，現(xiàn)在div的css樣式中加入了transition屬性，變成了緩慢的動(dòng)畫了。那么問題來了，如下：

3.transition寫在哪？

繼續(xù)上面的案例，我們寫在div上，就是告訴div，以后變化將會(huì)有過渡，為什么不是加在div:hover中？

將div里的transition:0.5s刪掉，放在div:hover中，（css代碼略）效果如下

鼠標(biāo)放在上面，效果還好，慢慢伸長(zhǎng)，鼠標(biāo)一松，立刻變短，沒有過渡效果。為什么？

因?yàn)閐iv:hover狀態(tài)時(shí)，有這個(gè)transition屬性，而div由短變長(zhǎng)中，給個(gè)過渡，就有動(dòng)畫。當(dāng)鼠標(biāo)離開div，不是hover狀態(tài)了，div沒有transition屬性，所以，立刻變短。

既然是變化，那就至少涉及到兩個(gè)狀態(tài)，變化前的狀態(tài)，變化后的狀態(tài)。兩個(gè)狀態(tài)不一樣，然后給予慢鏡頭過渡。就形成了動(dòng)畫。

也就是說：你想讓誰的變化具有動(dòng)態(tài)過渡的效果，那transition屬性就加在誰身上，還要加的讓變化前后兩個(gè)狀態(tài)，都能有transition屬性（要知道，div:hover時(shí)，也可有獲取到div中的屬性，反過來就不行了）。

在這里，變化前是div，變化后div:hover，兩個(gè)顯示出來不同。鼠標(biāo)移動(dòng)觸發(fā)的動(dòng)畫效果。那么這就有個(gè)問題了，如下：

4.怎么觸發(fā)transition動(dòng)畫？

上面知道，變化前div {...} ，變化后 div:hover {...} 。其中:hover狀態(tài)就是鼠標(biāo)移動(dòng)過去觸發(fā)的。這種就是通過偽類觸發(fā)。

偽類觸發(fā) 比如 :hover : focus :checked :active，有了這些偽類，就有了“狀態(tài)”，有了狀態(tài)，就有了不同，有了不同，就有了過渡動(dòng)畫。

還可以通過js觸發(fā)，比如說：js控制div增加個(gè)class為donghua，那么，頁面中該div增加個(gè)class，其屬性要變，如果設(shè)置過transition，那就會(huì)有動(dòng)畫效果。這么理解吧：瀏覽器發(fā)現(xiàn)該div變成div.donghua了，而且發(fā)現(xiàn)形狀大小色彩等前后不一樣了，給前后狀態(tài)變化的過程來個(gè)慢鏡頭，就形成了動(dòng)畫。

 1     
 2         <style type="text/css">
 3             div {
 4                 height:30px;
 5                 background-color:#FF9900;
 6                 
 7                 width:100px;
 8                 transition: 0.5s;
 9             }
10             div.donghua {
11                 width: 300px;
12             }
13         style>
14 ...
15 
16         <div class="donghua">
17             
18         div>

上面的并不會(huì)有動(dòng)畫效果，因?yàn)轫撁骘@示出來的時(shí)候，就已經(jīng)有了class="donghua" ，覆蓋了原來100px的定義，直接顯示寬度為300px了。下面?zhèn)€例子演示js控制，導(dǎo)致的變化，有了變化，也就有了動(dòng)畫。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style type="text/css">
 7             p {
 8                 height:30px;
 9                 background-color:#FF9900;
10                 
11                 width:100px;
12                 transition: 0.5s;
13             }
14             div.donghua p{
15                 width: 300px;
16             }
17         style>
18     head>
19     <body>
20         <div>
21             <p>看我的變化p>
22         div>
23         <script type="text/javascript">
24             window.onload = function(){
25                 document.body.children[0].onclick = function(){
26                     if(this.className == donghua){
27                         this.className = ;
28                     }else{
29                         this.className = donghua;
30                     }                
31                 }
32             }
33         script>
34         
39     body>
40 html>

效果如下：

知道動(dòng)畫怎么觸發(fā)的了，下面就要講講transition的具體參數(shù)了

5.transition都有哪些參數(shù)？默認(rèn)是什么？可以怎么寫？

transition是這四個(gè)屬性的復(fù)合樣式

屬性名	描述
transition-property	指定CSS屬性的name，transition效果（元素上的什么css屬性變化，默認(rèn)是all，上面例子就是div的width變化，設(shè)置為none則無變化）
transition-duration	transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默認(rèn)0）
transition-timing-function	指定transition效果的轉(zhuǎn)速曲線（勻速呢？還是先快后慢，或是先慢后快，等等...默認(rèn)ease）
transition-delay	定義transition效果開始的時(shí)候（等多久開始，默認(rèn)0）

transition: property duration timing-function delay;

默認(rèn)all 0 ease 0

先講講transition-property，舉例：

 1         div {
 2             width:100px;
 3             height:30px;
 4             background-color:#FF9900;
 5             transition: 1s;
 6         }
 7         div:hover {
 8             width: 300px;
 9             height: 90px;
10             background-color: green;
11         }

頁面只有一個(gè)div標(biāo)簽，動(dòng)畫效果如下，鼠標(biāo)移上去，寬高背景色都慢慢變了：

現(xiàn)在，把上面css第5行的transition: 1s;改為transition:width 1s; 那么就只有width是漸變，其他的都是突變，效果如下：

transition-property默認(rèn)是all，這個(gè)例子就是寫的width，那就只有width漸變，也可以寫none，那就沒有漸變效果了，等于沒寫。

第二個(gè)參數(shù)就是動(dòng)畫耗時(shí) transition-duration，默認(rèn)是0，所以必不可少，要不然沒有動(dòng)畫效果，沒什么可說的。

第三個(gè)參數(shù)transition-timing-function的值：

ease（默認(rèn)值）逐漸變慢
linear 勻速
ease-in 加速
ease-out 減速
ease-in-out 先加速后減速
cubic-bezier貝塞爾曲線(x1,y1,x2,y2)

http://cubic-bezier.com/ 這個(gè)網(wǎng)站是貝塞爾曲線數(shù)據(jù)生成工具，使用貝塞爾曲線的代碼示例如下

    transition:all 1s cubic-bezier(0.27,1.01,0.95,0.22)

第四個(gè)參數(shù)是延遲時(shí)間，就是等待多久才開始執(zhí)行動(dòng)畫。（在做導(dǎo)航欄下拉菜單時(shí)，有個(gè)延遲時(shí)間，讓鼠標(biāo)劃過時(shí)不會(huì)立即顯示，防止誤劃）上面的都沒有設(shè)置，如果設(shè)置為2s，那邊鼠標(biāo)移動(dòng)上去div上，div是hover狀態(tài)，但是要等2s后，動(dòng)畫執(zhí)行開始，如果不到2s鼠標(biāo)就移開了，div就不是hover狀態(tài)了，那就不執(zhí)行動(dòng)畫了。

上面我們對(duì)幾個(gè)參數(shù)搞清楚了，但是有個(gè)問題就是，寬高背景要么一起開始變，要么就只有某個(gè)突然變，我要想讓寬度變化1s完成，高度變慢點(diǎn)2s完成，背景更慢3s完成，怎么辦？寫3次transition嗎？答曰：用逗號(hào)隔開即可。

6.transition多樣式怎么寫？

還是上面div變化的案例，代碼就不重新搬運(yùn)了，只寫改動(dòng)的部分。

            /* 多個(gè)樣式各個(gè)樣式用逗號(hào)隔開即可  */
            /* 寬度1s完成變化，高度延遲1s執(zhí)行，2s完成變化，背景色3s完成變化 */
            transition:width 1s, height 2s 1s, background 3s;

效果如下：

未完待續(xù)

GPU云服務(wù)器云服務(wù)器 css3動(dòng)畫高性能css3動(dòng)畫浮動(dòng)效果動(dòng)畫翻轉(zhuǎn)動(dòng)畫效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1391.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 735·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6182·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

CSS3動(dòng)畫效果transition

1.transition的瀏覽器支持情況

2. 還是一步一步說說怎么用transition吧

3.transition寫在哪？

4.怎么觸發(fā)transition動(dòng)畫？

5.transition都有哪些參數(shù)？默認(rèn)是什么？可以怎么寫？

6.transition多樣式怎么寫？

相關(guān)文章

css3中的變形（transform）、過渡（transition）、動(dòng)畫（animation）屬性

css3動(dòng)畫屬性詳解之transform、transition、animation

CSS3 新特性

***CSS3的過渡和動(dòng)畫***

**不會(huì)做動(dòng)畫的程序猿不是好的動(dòng)畫師（如何用css3動(dòng)畫做動(dòng)畫）**

**面試官: css3動(dòng)畫了解嗎? 我: .......**

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

CSS3動(dòng)畫效果transition

1.transition的瀏覽器支持情況

2. 還是一步一步說說怎么用transition吧

3.transition寫在哪？

4.怎么觸發(fā)transition動(dòng)畫？

5.transition都有哪些參數(shù)？默認(rèn)是什么？可以怎么寫？

6.transition多樣式怎么寫？

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

5.transition都有哪些參數(shù)？默認(rèn)是什么？可以怎么寫？