css3中transition屬性詳解
我要評(píng)論transform呈現(xiàn)的是一種變形結(jié)果，而Transation呈現(xiàn)的是一種過(guò)渡，通俗點(diǎn)說(shuō)就是一種動(dòng)畫(huà)轉(zhuǎn)換過(guò)程，如漸顯、漸弱、動(dòng)畫(huà)快慢等。transition和transform是兩種不同的動(dòng)畫(huà)模型。
1. transition過(guò)渡屬性
transition 屬性是一個(gè)簡(jiǎn)寫(xiě)屬性，用于設(shè)置四個(gè)過(guò)渡屬性：
語(yǔ)法
transition: property duration timing-function delay;
值描述transition-property規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱。 transition-duration規(guī)定完成過(guò)渡效果需要多少秒或毫秒。
transition-timing-function規(guī)定速度效果的速度曲線。 transition-delay定義過(guò)渡效果何時(shí)開(kāi)始。
all：表示針對(duì)所有元素。
none：表示沒(méi)有元素。
ident：指定CSS屬性列表
注：請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。transition可以和Transform同時(shí)使用。
transition:<過(guò)渡屬性名稱> <過(guò)渡時(shí)間> <過(guò)渡模式>
transition-timing-function 的五種取值：
1.ease 逐漸變慢
2.linear 勻速
3.ease-in 緩慢開(kāi)始（加速）
4.ease-out 緩慢結(jié)束（減速）
5.ease-in-out 緩慢開(kāi)始，緩慢結(jié)束（先加速后減速）
6.cubic-bezier 貝塞爾曲線（matthewlein.com/ceaser）
過(guò)渡模式比如寬過(guò)渡，高過(guò)渡和all過(guò)渡
看一個(gè)實(shí)例：
<style type="text/css">
.trans1{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
left:10px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans2{
-webkit-transition:0.5 ease;
-moz-transition:0.5s ease;
-webkit-transition-property:width;
-moz-transition-property:width;
position:absolute;
left:350px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans3{
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition-property:height;
-moz-transition-property:height;
position:absolute;
left:780px;
top:50px;
height:100px;
width:150px;
background:#EF4900;
color:white;
}
.trans1:hover{
width:300px;
height:300px;
}
.trans2:hover{
width:400px;
}
.trans3:hover{
height:500px;
}
</style></p> <p><body>
<div class="trans1">變換所有的屬性</div>
<div class="trans2">只變換寬度屬性</div>
<div class="trans3">只變換高度屬性</div>
</body>
相關(guān)文章
css動(dòng)畫(huà)屬性使用及實(shí)例代碼(transition/transform/animation)
這篇文章主要介紹了css動(dòng)畫(huà)屬性使用及實(shí)例代碼(transition/transform/animation) ,需要的朋友可以參考下2019-05-09
使用css transition屬性實(shí)現(xiàn)一個(gè)帶動(dòng)畫(huà)顯隱的微信小程序部件
這篇文章主要介紹了使用css transition屬性實(shí)現(xiàn)一個(gè)帶動(dòng)畫(huà)顯隱的微信小程序部件的相關(guān)資料,需要的朋友可以參考下2018-06-13CSS3使用transition屬性實(shí)現(xiàn)過(guò)渡效果
CSS3中新增的transform屬性，可以實(shí)現(xiàn)元素在變換過(guò)程中的過(guò)渡效果，實(shí)現(xiàn)了基本的動(dòng)畫(huà)。下面通過(guò)本文給大家介紹CSS3使用transition屬性實(shí)現(xiàn)過(guò)渡效果，需要的朋友參考下本文2018-04-18CSS3中的元素過(guò)渡屬性transition示例詳解
大家都知道過(guò)渡動(dòng)畫(huà)是動(dòng)畫(huà)的基礎(chǔ)，在學(xué)習(xí)動(dòng)畫(huà)屬性之前，我們需要先了解過(guò)渡屬性transition，下面這篇文章通過(guò)示例代碼給大家詳細(xì)介紹了CSS3中的元素過(guò)渡屬性transition，有2016-11-30- 這篇文章主要介紹了css3的transition屬性詳解,需要的朋友可以參考下2014-12-15
css簡(jiǎn)單動(dòng)畫(huà)之transition屬性詳解
這篇文章主要介紹了css簡(jiǎn)單動(dòng)畫(huà)之transition屬性詳解,需要的朋友可以參考下2019-09-17
