過渡：元素從一種效果過渡另一種效果上

要求： 1、把效果添加到哪個CSS屬性 2、過渡效果的時長 3、效果觸發(fā)的動作（hover）

目錄

1.單項(xiàng)改變

2.多項(xiàng)改變

3.指定過渡的速度

4.延遲過渡效果

5.總結(jié)

---

1.單項(xiàng)改變

<style type="text/css"> div{/* 寬度2秒的過渡 */transition:width 2s,height 3s,transform 3s; } div:hover{width: 500px;height: 500px;transform:rotate(40deg);background: red; } </style>

2.多項(xiàng)改變

多項(xiàng)改變： 同時制定多個屬性進(jìn)行過渡效果，添加多個屬性，用逗號進(jìn)行隔開 <style type="text/css"> div {width: 100px;height: 100px;background: red;transition: width 2s, height 4s; }div:hover {width: 300px;height: 300px; } </style>

3.指定過渡的速度

用transition-timing-function屬性

ease	規(guī)定過渡效果，先緩慢地開始，然后加速，然后緩慢地結(jié)束（默認(rèn)）
linear	規(guī)定從開始到結(jié)束具有相同速度的過渡效果
ease-in	規(guī)定緩慢開始的過渡效果
ease-out	規(guī)定緩慢結(jié)束的過渡效果
ease-in-out	規(guī)定開始和結(jié)束較慢的過渡效果
cubic-bezier(n,n,n,n)	允許您在三次貝塞爾函數(shù)中定義自己的值

<style type="text/css"> div:hover {width: 300px; } #div {transition-timing-function: ease-in;} </style>

4.延遲過渡效果

用transition-delay屬性

<style type="text/css"> div {transition-delay: 2s; } 《/style》

5.總結(jié)

CSS 過渡屬性：

transition	簡寫屬性，用于將四個過渡屬性設(shè)置為單一屬性。
transition-delay	規(guī)定過渡效果的延遲（以秒計(jì)）。
transition-duration	規(guī)定過渡效果要持續(xù)多少秒或毫秒。
transition-property	規(guī)定過渡效果所針對的 CSS 屬性的名稱。
transition-timing-function	規(guī)定過渡效果的速度曲線。

總結(jié)

以上是生活随笔為你收集整理的css的过渡效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。