CSS使用過渡——transition屬性
過渡
通過CSS3，我們可以在不使用Flash動畫或者JavaScript的情況下，當元素從一種樣式轉換為另一種樣式時為元素新增效果。
瀏覽器支援
表格中的數字表示支援該屬性的第一個瀏覽器版本號
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支援該字首屬性的第一個瀏覽器版本號。
| 屬性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- | 10.0 -ms- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- | 10.0 -ms- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- | 10.0 -ms- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- | 10.0 -ms- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- | 10.0 -ms- | 16.0 4.0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
它如何工作？
CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。
要實現這一點，必須規定兩項內容：
- 規定您希望把效果新增到哪個 CSS 屬性上
- 規定效果的時長
過渡屬性
transition-property屬性的值為其它屬性的名稱。一旦設定後，其值會慢慢變化，非其值會瞬間變化。
例項
應用於寬度屬性的過渡效果，時長為2s
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}註釋：如果時長（transition-duration）未規定，則不會有過渡效果，因此預設值是0。
效果開始於指定的CSS屬性改變值時，CSS屬性改變的典型時間是滑鼠指標位於元素上時
規定當滑鼠指標懸浮於<div>元素上時
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>請把滑鼠指標放到黃色的 div 元素上，來檢視過渡效果。</p>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>註釋：當指標移出元素時，它會逐漸變回原來的樣式。
多項改變
如需向多個樣式新增過渡效果，請新增多個屬性，有逗號隔開。
向寬度、高度和轉換新增過渡效果
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<div>請把滑鼠指標放到黃色的 div 元素上，來檢視過渡效果。</div>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
</body>
</html>
該例設定了所有的過渡屬性
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<div></div>
<p>請把滑鼠指標放到黃色的 div 元素上，來檢視過渡效果。</p>
<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>
<p><b>註釋：</b>這個過渡效果會在開始之前等待兩秒。</p>
</body>
</html>對上例使用簡寫屬性，一樣能起到相同的過渡效果：
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
transition-timing-function屬性
| 值 | 描述 |
|---|---|
| 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 之間的數值。 |
註釋：ease-in等三個屬性的“慢速”效果比ease的要更慢。
相關推薦
CSS使用過渡——transition屬性
過渡通過CSS3，我們可以在不使用Flash動畫或者JavaScript的情況下，當元素從一種樣式轉換為另一種樣式時為元素新增效果。瀏覽器支援表格中的數字表示支援該屬性的第一個瀏覽器版本號緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支援該字首屬性的第一個瀏
CSS之transition屬性
clas art idt back htm margin val eight ack 1.鼠標移動到div中背景顏色慢慢變化（1個屬性的變化） <!DOCTYPE html> <html> <head> &
深入理解CSS過渡transition
前面的話 通過過渡transition，可以讓web前端開發人員不需要javascript就可以實現簡單的動畫互動效果。過渡屬性看似簡單，但實際上它有很多需要注意的細節和容易混淆的地方。本文將介紹和梳理關於CSS過渡的知識 定義 過渡transition是一個複合屬性，包括transiti
京東圖片過渡效果—瞭解transition屬性
要點： 1、transition有四個屬性，注意時間曲線和延時可以省略，預設分別是ease和0 2、注意切換的原理類似滑動門，遮住一部分，圖片的寬度比顯示寬度要大 html程式碼： <!DOCTYPE html> <html lang="en"> <he
CSS過渡屬性
不是所有的CSS屬效能有過渡屬性，只有具備中間值的屬性有過渡效果。 常見有過渡效果的css屬性有： 顏色：color background-color border-color outline-color 位置：background-position to
利用css transition屬性實現一個帶動畫顯隱的微信小程式部件
我們先來看效果圖像這樣的一個帶過渡效果的小部件在我們實際開發中的應用機率還是比較大的，但是在開發微信小程式的過程中可能有的小夥伴發現transition這個屬性它不好使（下面說明）所以我們這個時候會考慮去使用微信官方提供的wx.createAnimation API來建立動
CSS3使用transition屬性實現過渡效果
毫秒 kit ace syn bic mar spa ima 應用 transition屬性目的是讓css的一些屬性（如background）的以平滑過渡的效果出現。它是一個合並屬性，是由以下四個屬性組合而成： transition-property：設置應用過渡的C
css中那些屬性可以被繼承
mil 屬性 ria ext direct tran ade weight -s 主要的有： 字體相關：line-height, font-family, font-size, font-style, font-variant, font-weight, font 文本相關
CSS border-image屬性
subject resp 進制 柵格圖像 分用 實際應用 變形 rep 檢查 CSS border-image 屬性 border-image屬性很容易記，它允許你將圖片或CSS漸變形狀作為一個元素的邊框。 .module {border-image: url(b
分針網——每日分享：CSS 自定義屬性：API 篇
css JQuery是一個非常優秀的js庫。 選擇元素 $( )裏可以填css選擇器 $(’.demo’).
CSS中position屬性( absolute | relative | static | fixed )詳解
ack 關系 tail 而且 tools css bar 簡單 tag 我們先來看看CSS3 Api中對position屬性的相關定義： static：無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用。 relative：對象遵
css之定位屬性
color 進行 塊級元素 文檔 定義 adding absolut 表示 頁面 定位標簽：position包含的屬性：relative（相對）與 absolute（絕對）1.position:relative：如果對一個元素進行相對定位，首先它將出現在它所在的位置上。 然
JS 對html標簽的屬性的幹預以及JS 對CSS 樣式表屬性的幹預
inpu cti doc tel tex ttext button abcd element -任何標簽的任何屬性都可以修改! -HTML裏是怎麽寫, JS就怎麽寫 以下是一段js 作用於 css 的 href的 代碼 <link id="l1"
CSS3 過渡 transition
tle 例子 所有 linear order log all str per 在一個例子中使用所有過渡屬性： div { transition-property: width;/*all*/ transition-duration:1s;/*0.6s*/ transiti
css float 浮動屬性
com 標準 value 高度 相等 技術 doc char pre 一、相關概念介紹 1、文檔流 HTML頁面的標準文檔流(默認布局)是：從上到下，從左到右，遇塊(塊級元素)換行。 2、浮動層 給元素的float屬性賦值後，就是脫離文檔流
CSS text-decoration 屬性
java 實例 ati 默認值 span 文本 bject 允許 用戶 定義和用法 text-decoration 屬性規定添加到文本的修飾。 註釋：修飾的顏色由 "color" 屬性設置。 說明 這個屬性允許對文本設置某種效果，如加下劃線。如果後代元素沒有自己的裝飾，祖先
CSS過渡和動畫
css過渡與動畫一.過渡1.定義：將CSS的屬性值在一段時間內平緩變化的過程給體現出來；2.指定過渡屬性 2.1作用：指定哪個或者哪幾個屬性值，在變化時需要使用過渡效果來體現；2.2屬性：transition-property取值：屬性名 例子：transition-property:background;
CSS中新屬性calc()
除了 foo http standard 內容 afa 給他 5% 同事 CSS3的calc() calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。因為看其外表像個函數，既然是函數為何
css布局屬性
body 浮動 left 容器 清除 常用 空間 style 文檔流 文檔流類型：文檔中的元素在排列顯示的顯示規則，html中提供了3中文檔流類型控制元素的布局方式。 普通流：文檔中的元素默認顯示顯示規則。 從上到下，從左到右 塊級元素獨占一行 元素不能重疊（無法交
CSS之 float 屬性
spa 需要 字符 pre play ie8 -s table style 特性： float的設計初衷僅僅是文字環繞效果 浮動具有破壞性,會使父容器高度塌陷 清除浮動方法: 1.腳底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE