CSS3 ： transition 屬性

時間 2019-11-12

原文原文鏈接

CSS3的 transition 屬性用於狀態過分效果！

一、語法：html

1 transition: property duration timing-function delay;
2 -moz-transition: property duration timing-function delay;
3 -webkit-transition: property duration timing-function delay;
4 -o-transition: property duration timing-function delay;

上以語法兼容各瀏覽器。jquery

transition: 
    規定設置過渡效果的 CSS 屬性的名稱
    過渡效果須要多少秒
    規定速度效果的速度曲線
    定義過渡效果什麼時候開始

二、transition含有四個部份設置，各部份設置以下：web

a) property ：規定設置過渡效果的 CSS 屬性的名稱，可選值以下：瀏覽器

none	沒有屬性會得到過渡效果。
all	【默認值】全部屬性都將得到過渡效果。
property	定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔，好比： width,height

好比： transition: width 3s; 只讓寬度產生動畫過渡效果，其它屬性不產生效果。函數

b) duration：規定完成過渡效果須要多少秒或毫秒，好比：transition: all 3s; 表示3秒完成過渡效果。動畫

c) timing-function :規定速度效果的速度曲線，可選值以下：spa

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 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

d) delay：定義過渡效果什麼時候開始，好比： transition: width 3s linear 5s;code

如下是一代簡易代碼演示：htm

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <script src="js/jquery.js"></script>
 5     <style>
 6         .a {
 7             width:100%;
 8             height:200px;
 9             transition:all 3s ease-in;
10             background:#03F;
11         }
12         .c {
13             width:300px;
14         }
15         .a:hover {
16             height:400px;
17         }
18     </style>
19 </head>
20 
21 <body>
22 <div class="a">
23 </div>
24 
25 <p>單擊頁面，使寬度縮小</p>
26 <p>移到紅色區域，使高度變大</p>
27 <script>
28     $(document).click(function(){
29         $('.a').addClass('c');
30     });
31 </script>
32 </body>
33 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。