CSS3動畫效果transition

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

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

1.transition的瀏覽器支持情況

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

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

頁面只有一個div，其css如下：

鼠標移動到div上，div立刻變寬為300px，效果如下：

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

效果如下：

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

3.transition寫在哪？

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

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

鼠標放在上面，效果還好，慢慢伸長，鼠標一松，立刻變短，沒有過渡效果。為什么？

因為div:hover狀態(tài)時，有這個transition屬性，而div由短變長中，給個過渡，就有動畫。當鼠標離開div，不是hover狀態(tài)了，div沒有transition屬性，所以，立刻變短。

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

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

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

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

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

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

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

 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>

上面的并不會有動畫效果，因為頁面顯示出來的時候，就已經有了class="donghua" ，覆蓋了原來100px的定義，直接顯示寬度為300px了。下面?zhèn)€例子演示js控制，導致的變化，有了變化，也就有了動畫。

 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>

效果如下：

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

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

transition是這四個屬性的復合樣式

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

transition: property duration timing-function delay;

默認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         }

頁面只有一個div標簽，動畫效果如下，鼠標移上去，寬高背景色都慢慢變了：

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

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

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

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

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

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

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

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

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

6.transition多樣式怎么寫？

還是上面div變化的案例，代碼就不重新搬運了，只寫改動的部分。

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

效果如下：

未完待續(xù)

云服務器 GPU云服務器 css3動畫高性能css3動畫浮動效果動畫翻轉動畫效果

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1391.html

css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現(xiàn)動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
css3動畫屬性詳解之transform、transition、animation

摘要：動畫屬性詳解關于制作動畫的幾個屬性變形轉換和動畫。一屬性旋轉中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解：關于CSS3制作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。一、transform 屬性：旋轉rotate（中...

Riddler 2019-08-30 12:46 評論0 收藏0
CSS3 新特性

摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴展半徑陰影顏色內陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設置取值陰影類型此參數(shù)可選。 CSS3 是最新的 CSS 標準，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規(guī)范進行開發(fā)，雖然標準的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經支持相當多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 評論0 收藏0
CSS3的過渡和動畫

摘要：轉化的轉化分為以下幾種移動旋轉縮放傾斜混合每種轉化都還有對應的版本注意閉合的內聯(lián)元素不支持轉化，過渡和動畫如等。過渡和動畫都是CSS3的重要部分，今天有時間，了解些相關內容并記錄下。在開始之前，首先看看CSS3的轉化。轉化 CSS3的轉化分為以下幾種： translate 移動 rotate　旋轉 scale　縮放 skew　傾斜 matrix　混合每種轉化都還有對應的3d版...

andong777 2019-08-30 13:53 評論0 收藏0
不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉換一轉換縮放移動旋轉設置元素轉換的中心點綜合性寫法二轉換三維坐標系透視呈現(xiàn)位移旋轉一過渡一的作用如果你有一個盒子，他的體內也有個小盒子。 ...

xeblog 2021-11-11 16:55 評論0 收藏0
面試官: css3動畫了解嗎? 我: .......

摘要：過渡允許的屬性值在一定的時間區(qū)間內平滑地過渡。需要明確知道，開始狀態(tài)和結束狀態(tài)的具體數(shù)值，才能計算出中間狀態(tài)。需要事件觸發(fā)，所以沒法在網頁加載時自動發(fā)生。是一次性的，不能重復發(fā)生，除非一再觸發(fā)。 transition(過渡) transition允許css的屬性值在一定的時間區(qū)間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發(fā)，并圓滑地以動畫效果改變CSS的屬性值...

番茄西紅柿 2019-05-23 15:55 評論0 收藏0