CSS屬性之過渡（transition）屬性
定義
過渡transition是個複合屬性，它包括了transition-property、transition-duration、transition-timing-function、transition-delay這四個屬性，配合這四個屬性完成一個完整的過渡動畫效果。
transition-property: 過渡屬性，指定屬性的name、transition效果（預設值為all）
transition-duration: 過渡效果需要多久時間完成，指定完成過渡的時間。（單位：s/ms）
transition-timing-function: 指定完成過渡的曲線。（是勻速還是非勻速）
transition-delay
縮寫形式：transition: transition-property transition-duration transition-timing-function transition-delay;
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <title>過渡屬性</title> <style> #trans { width: 50px; height: 100px; border: 1px solid red; background-color: blue; -webkit-transition-property: width; transition-property: width; -webkit-transition-duration: 2s; transition-duration: 2s; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-delay: 2s; transition-delay: 2s; } #trans:hover { width: 400px; } </style> </head> <body> <div id="trans"> 過渡 </div> </body> </html>
效果如下：
在transition的這四個屬性中，只有transition-duration是必需且不能為0的，transition-duration與transition-delay都表示時間，當這兩個放在一起的時候，第一個是transition-duration，第二個是transition-delay，當只有一個時，表示的是transition-duration，transition-delay預設值是0。
當有兩個時間時：
#trans { width: 50px; height: 100px; border: 1px solid red; background-color: blue; transition: 1s 1s; /* 當只有兩個時間時 */ }
效果如下：
當只有一個時間時：
#trans {
width: 50px;
height: 100px;
border: 1px solid red;
background-color: blue;
transition: 1s; /* 當只有一個時間時 */
}效果如下：
注：transition的這四個屬性不能用逗號隔開，能用逗號隔開的是不同的屬性（transition能有多個不同的屬性），如：width,height,background-color，用空格隔開的是不同屬性的四個子屬性。
transition-property（過渡屬性name）
不是所有的CSS屬效能有過渡屬性，只有具備中間值的屬性有過渡效果。
常見有過渡效果的css屬性有：
顏色：color background-color border-color outline-color
位置：background-position top right bottom left
長度：max-height max-width height width min-height min-width
border-width margin padding outline-width
font-size line-height text-indent vertical-align
letter-spacing word-spacing
數值：opacity font-weight z-index
組合：transform text-shadow box-shadow clip
transition-duration屬性
transition-duration屬性指定過渡持續時間，過渡所需時間。單位是s或者ms
該值必須有且不能為負值，預設值是0s，0表示無效值。所以必需帶單位。
當時間值為單值時，表示 所有的過渡屬性 都 對應同樣時間，當時間是多值時，過渡屬性 按照順序 對應持續時間。
transition-delay屬性
transition-delay屬性指定延遲多少時間後開始過渡效果，同樣必需帶單位，單位是s或者ms
不帶單位為無效值。若為負值，則無延遲效果。
當為單值時，表示 所有的過渡屬性 都 對應同樣時間，當時間是多值時，過渡屬性 按照順序 對應持續時間。
transition-timing-function屬性
該屬性指定過渡速度。
linear：以勻速過渡。
ease：慢速開始，中間快速，以慢速結束。
ease-in：慢速開始。
ease-out：慢速結束。
ease-in-out：以慢速開始和結束。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>過渡屬性</title>
<style>
div {
width: 100px;
height: 50px;
font-weight: bold;
background-color: red;
color: white;
transition: width 1s;
}
.div1 {transition-timing-function: linear;}
.div2 {transition-timing-function: ease;}
.div3 {transition-timing-function: ease-in;}
.div4 {transition-timing-function: ease-out;}
.div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<div class="div1">linear</div>
<div class="div21">ease</div>
<div class="div3">ease-in</div>
<div class="div4">ease-out</div>
<div class="div5">ease-in-out</div>
</body>
</html>效果如下：
多值
transition的屬性值用 逗號隔開時，表示為多個屬性值設定過渡屬性。
1）若不同的transition-property值，對應的其它（duration||timing-function||delay）屬性值相同時，對應的屬性值設定一個即可。
div {
width: 100px;
height: 100px;
font-weight: bold;
background-color: red;
color: white;
transition: width,background-color; /* 不同的property值 */
transition-duration: 1s;
transition-timing-function: linear; /* 對應的屬性值設定一個 */
transition-delay: 1s;
}
div:hover {
width: 300px;
background-color: blue;
}效果如下：
可以看出，上面property的屬性值不同，但它們對應的其它屬性值相同，所以其它的屬性值只設置一個即可。
2）當property的值的個數多於其它屬性值（其它屬性值的個數大於1）時，按照順序取值。
div {
width: 100px;
height: 100px;
font-weight: bold;
background-color: red;
color: white;
transition: width,background-color,opacity;
transition-duration: 1s,5s;
transition-timing-function: linear,ease;
transition-delay: 1s,20ms;
}效果如下
3）當property的屬性值個數少於其它屬性值的個數時，多餘的將無效（按順序取值）。
div {
width: 100px;
height: 100px;
font-weight: bold;
background-color: red;
color: white;
transition: width;
transition-duration: 1s,5s;
transition-timing-function: linear,ease;
transition-delay: .5s,20ms;
}
div:hover {
width: 300px;
}效果如下：
4）當property屬性值中出現一個無效值時，依然按順序對應其它屬性值（若其它屬性值也出現無效值情況類似）。
div {
width: 100px;
height: 100px;
font-weight: bold;
background-color: red;
color: white;
transition: width,wuxiaozhi,background-color;
transition-duration: 1s,5s;
transition-timing-function: linear,ease;
transition-delay: .5s,20ms;
}
div:hover {
width: 300px;
background-color: blue;
}效果如下：
5）當property屬性值出現重複值時，只取最後一個值為準，前面重複值無效，並按順序對應其它屬性值。
過渡階段
過渡開始時間=樣式改變的時刻+過渡延遲時間；而過渡結束時間=過渡開始時間+過渡持續時間
過渡起始值=過渡前 的過渡屬性值；而過渡結束值=過渡完成後 的過渡屬性值
過渡分為兩個階段：前進(forward)和反向(reverse)。若前進階段進行一段時間後進入反向階段，則反向階段的初始值是前進階段結束時的瞬時值
相關推薦
CSS屬性之過渡（transition）屬性
定義 過渡transition是個複合屬性，它包括了transition-property、transition-duration、transition-timing-function、transit
CSS屬性之文字（Text）屬性 常用14個
color屬性 color屬性設定文字字型顏色。 顏色值有三種寫法： 直接寫顏色名，如：red十六進位制，如：#d2d2d2rgb顏色，如：rgb(255,0,255),注：數值最大為255，最
CSS3特效之轉化（transform）和過渡（transition）
在對動畫深入之前，我們需要先了解它的一些特性，CSS3的轉化（transform）和過渡（transition）。有人可能會有疑問，CSS3動畫不是隻有animation一個屬性嗎？怎麼又和轉化（transform）和過渡（transition）扯
css重構之旅（一）
rdquo lan set 變化 部分 網站 一個 寬度 lang css重構之旅 >前言： 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去，馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術，反而忽略了最基礎
css3——transition動畫過渡（transition動畫過渡可作用的屬性），animation動畫鋪墊和@keyframes動畫關鍵幀
css3動畫優點：開啟GPU加速，不會產生動畫佇列，即頻繁點選按鈕時，不會有多個動畫在等待執行； 1. transition: property duration timing-function delay; 是個複合屬性，包括： transition-property
css動畫-animation各個屬性詳解（轉）
yellow range 空隙 定義 tro content bin ora .com CSS3的animation很容易就能實現各種酷炫的動畫，雖然看到別人的成果圖會覺得很難，但是如果掌握好各種動畫屬性，做好酷炫吊炸天的動畫都不在話下，好，切入正題。 一、動畫屬性：
Ajax技術之XMLHttpRequest（二）【XMLHttpRequest常用方法和屬性】
tro 沒有 body htm 事件 thead 指定 response date 一、XMLHttpRequest中常用的方法： （1）open（）方法：用於設置進行異步請求目標的URL、請求方法以及其他參數信息。 函數原型：open("method","URL",asy
從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性
器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht
css中文字（text）和字型（font）屬性
文字屬性 1、text-decoration屬性表示文字的修飾 none：取消裝飾 underline ：下劃線，與標籤、效果相同 overline ：上劃線 line-through ：貫穿線（刪除線），與標籤、效果相同 blink ：閃爍（因相容性問題很少使用）
Vue學習之路（七）---transition過渡動畫
vue中過度動畫v-if和v-show都可以使用，首先要明白四個狀態，v-enter(剛開始進入) ，v-enter-active(進入過程中到進入完畢),v-leave-enter(剛開始離開),v-leave-enter-active(離開過程中到離開)，示例圖如下 好的，弄
CSS布局學習（三） - position屬性定義及解釋(官網直譯)
mage http docs stand 屏幕 保留 gin 技術 地址 static ①元素的位置是在文檔正常布局流中的位置。 ②設置top right bottom left與z-index無效。 ③在未指定position時，static是默認值 以下例子進行
Shape屬性之圓角（實現程式碼及思路）
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!--設定背景色--> <soli
從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、相容程式碼 1
從零開始學 Web 之 CSS3（三）漸變，background屬性
一、漸變 漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變、徑向漸變。 1、線性漸變 線性漸變：指沿著某條直線朝一個方向產生漸變效果。 語法： background: linear-gradient(
從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件
一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。 如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二 元素.width(屬性
從零開始學 Web 之 jQuery（四）元素的建立新增與刪除，自定義屬性
一、元素的建立新增和刪除 1、方式一：以物件的方式建立元素 append，appendTo ：在被選元素所有子元素的結尾插入內容（增加子元素）。 prepend，prependTo：在被選元素所有子元素的開頭插入元素（增加子元素）。 before：在當前被選元素之後插入內容（相當於增加兄弟元素）。 af
CSS定位（positive）屬性的原理
static 預設值，元素出現在正常的流中。預設值，所以沒什麼好說的。 relative 通過設定水平距離（left/right）或垂直距離（top/bottom），讓這個元素相對於它的起點移動。元素仍然佔據原來的空間。所以當div2偏移100px
CSS3之------box-shadow屬性使用方法（1），即單邊陰影效果設定
《圖解CSS3：核心技術與案例實戰》第3章CSS3邊框，本章主要介紹CSS3新增的邊框特性，首先從CSS的border屬性著手切入，分別介紹了CSS3新增邊框特性，border-color、border-image、border-radius以及box-shadow。詳細介紹了每個特性的語法規則，並且結合
Maven學習之路（五）maven的靈活構建--屬性、profile和資源過濾
前言 在很多情況下，我們希望專案在不同的階段有不同的構建，開發的時候，使用開發的環境配置，測試的時候，使用測試的環境配置，上線的時候使用其他的配置，雖然說，每次切換專案執行的環境的時候，我們可以手動更改配置，但這樣難免有疏漏之處，導致專案構建的失敗。這個時候，我