transition 過渡如果想做出細膩的過渡效果，那么這個屬性可能會滿足你的需求。這個屬性簡單的來說就是用來模擬需要變化的屬性，從開始到結束數值之間的過渡。 1. 官方定義transition 屬性是一個簡寫屬性，用于設置四個過渡屬性：
2. 解釋transition 用來設置一個屬性狀態從開始到結束中間這個過程的變化。它是 transition-property、transition-duration、transition-timing-function、transition-delay、這四個屬性的縮寫。它們分別代表了：要使用過度動畫的屬性、過渡動畫的時間、過渡動畫的加速度函數即數值變化的快慢過程、過渡動畫的延遲時間。而我們通常使用過渡屬性完成元素過渡的這個過程一般使用 transition 。 3. 語法.demo{
transition: property duration timing-function delay;
}屬性值說明：
4. 兼容性
5. 實例1. 當鼠標移動到元素上，使用過渡屬性來讓元素的高度變化，從而實現一個過渡效果。 <div class="demo"></div> .demo{
width: px;
height: px;
background: #000;
transition: height s;
}
.demo:hover{
height: px;
}效果圖：
寫法一： .demo{
width: px;
height: px;
background: #000;
transition: height s,width s;
}
.demo:hover{
width: px;
height: px;
}寫法二： .demo{
width: px;
height: px;
background: #000;
transition: all s;
}
.demo:hover{
width: px;
height: px;
}效果圖：
說明：這兩種方式都可以實現我們所要的過渡方式。不過這里推薦使用第一種方式。
.demo{
width: px;
height: px;
background: #000;
transition: height s ease-in,width s ease-out;
}
.demo:hover{
width: px;
height: px;
}效果圖：
說明：在 transition 第三個值使用了動畫函數，改變了過渡過程中完成的速度，我們可以很清楚的看到他們的變化速度。
.demo{
width: px;
height: px;
background: #000;
transition: height s ease-in s,width s ease-out s;
}
.demo:hover{
width: px;
height: px;
}效果圖：
說明：我們可以看到鼠標放到元素上 1s 之后開始動畫，而離開元素之后 1s 之后開始動畫。 6. Tips通過上面的實例可以知道 transition 的屬性值配置很靈活，但是我們要遵循一定的規律，這不單是增加了代碼的可讀性，也符合瀏覽器解析規則的規律。 hover 到按鈕上改變按鈕的位置和背景顏色。 <button class="demo"></button> .demo{
width: px;
height: px;
line-height: px;
border-radius: px;
background: #000;
color:#fff;
border:none;
transition: background s,transform s;
}
.demo:hover{
background: red;
transform: translateY(-px);
}效果圖：
7. 小結
|
