詳解css3中transition屬性
我要評(píng)論css3中通過(guò)transition屬性可以實(shí)現(xiàn)一些簡(jiǎn)單的動(dòng)畫過(guò)渡效果~
1、語(yǔ)法
transition: property duration timing-function delay;
transition 屬性設(shè)置元素當(dāng)過(guò)渡效果，是一個(gè)復(fù)合屬性，包括四個(gè)簡(jiǎn)寫屬性：
transition-property：指定CSS屬性的name，transition效果（默認(rèn)值：all）
transition-duration（必須）：過(guò)渡效果持續(xù)時(shí)間（不指定默認(rèn)為0，不會(huì)有任何效果）
transition-timing-function：指定過(guò)渡效果的轉(zhuǎn)速曲線（默認(rèn)值：ease）
transition-delay：指定過(guò)渡延遲開始時(shí)間（默認(rèn)為0）
注意：IE9及以下不支持該屬性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前綴；而其余高版本瀏覽器支持標(biāo)準(zhǔn)寫法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tra{
width: 50px;
height: 50px;
background-color: lightcoral;
/* 復(fù)合屬性 */
transition: all 2s ease 0s;
/* 采用以下分屬性也是可以的 */
transition-duration: 2s;
transition-property: all;
transition-timing-function: ease;
transition-delay: 0s;
}
.tra:hover{
width: 200px;
}
</style>
</head>
<body>
<div class="tra"></div>
</body>
</html>
運(yùn)行效果：
注意：在使用transition復(fù)合屬性時(shí)，各個(gè)屬性用空格隔開，不能使用,
2、分屬性
（1）transition-property
transition-property屬性可以指定需要過(guò)渡的css屬性，默認(rèn)值為all表示所有屬性都過(guò)渡（不寫該屬性值也表示all）,如果為none則沒有任何屬性存在過(guò)渡效果
.tra{
width: 50px;
height: 50px;
background-color: lightcoral;
/* 指定 width 屬性過(guò)渡 */
transition: width 2s ease 0s;
}
.tra:hover{
width: 200px;
height: 100px;
}
<div class="tra"></div>
只指定width屬性過(guò)渡，height屬性未指定
注意：并不是所有css屬性都可以過(guò)渡，只有具備中間值的屬性才有過(guò)渡效果，比如display:block不能過(guò)渡為display:none
（2）transition-duration
transition-duration屬性可以用來(lái)設(shè)置一個(gè)屬性過(guò)渡所需要的時(shí)間，也就是該屬性從舊值到新值過(guò)渡所需時(shí)間（持續(xù)時(shí)間），默認(rèn)值為0s，不指定就沒有過(guò)渡效果
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* 此處transition-property省略，默認(rèn)為all */
/* 指定過(guò)渡時(shí)間為2s */
transition: 2s ease 0s;
}
.tra:hover{
width: 100px;
height: 100px;
}
注意：
- 不能為負(fù)值
- 必須帶上單位，單獨(dú)一個(gè)數(shù)字無(wú)效該值為單值時(shí)，即所有過(guò)渡屬性都對(duì)應(yīng)同樣時(shí)間；
- 該值為多值時(shí)，過(guò)渡屬性按照順序?qū)?yīng)持續(xù)時(shí)間
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
transition-property: width,background;
transition-timing-function: ease;
transition-duration: 5s, 2s;
/* 以上分屬性等價(jià)于下面復(fù)合屬性寫法 */
transition: width 5s ease 0, background 2s ease 0;
}
.tra:hover{
width: 100px;
background-color: blue;
}
當(dāng)該值為多值時(shí)，過(guò)渡屬性按照順序?qū)?yīng)持續(xù)時(shí)間
（3）transition-timing-function
transition-timing-function屬性指的是過(guò)渡的“緩動(dòng)函數(shù)”，用來(lái)指定屬性過(guò)渡時(shí)動(dòng)畫運(yùn)動(dòng)形式，值可以是關(guān)鍵字、貝塞爾曲線（bezier），默認(rèn)值為ease
關(guān)鍵字：linear| ease| ease-in| ease-out| ease-in-out|
貝塞爾：cubic-bezier(n,n,n,n);
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* transition-timing-function默認(rèn)值為ease */
transition: 1s linear| ease| ease-in| ease-out| ease-in-out|;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
ease：開始和結(jié)束慢，中間快
linear：勻速
ease-in：開始慢，越來(lái)越快
ease-out：結(jié)束慢，越來(lái)越慢
ease-in-out：先加速后減速，與ease類似，但比ease幅度大
cubic-bezier(n,n,n,n)貝塞爾曲線中4個(gè)值隨意調(diào)整，就會(huì)得到不同的效果
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
transition: 1s cubic-bezier(.75,2.03,0,.14);
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
（4）transition-delay
transition-delay屬性指定過(guò)渡開始前的延遲時(shí)間
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
/* 2s過(guò)后過(guò)渡才開始執(zhí)行 */
transition: 1s cubic-bezier(.75,2.03,0,.14) 2s;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
3、結(jié)束語(yǔ)
最后再說(shuō)明補(bǔ)充兩點(diǎn)內(nèi)容：
1、觸發(fā)方式：transition屬性并非只有hover才能觸發(fā)，其他比如【點(diǎn)擊事件】【獲得/失去焦點(diǎn)】【長(zhǎng)按】等操作都可以觸發(fā)transition屬性過(guò)渡
2、事件回調(diào)：transition屬性只有一個(gè)事件，那就是transitionend事件，它在過(guò)渡事件完成后觸發(fā)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#test{
height: 60px;
width: 60px;
background-color: lightpink;
transition: width 1.5s;
font-size: 12px;
}
#test:hover{
width: 250px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
<script>
//監(jiān)聽 transitionend 事件
test.addEventListener("transitionend", myFunction);
// 回調(diào)函數(shù)
function myFunction(e){
e = e || event;
test.innerHTML = "過(guò)渡結(jié)束，執(zhí)行事件回調(diào)內(nèi)容"
}
</script>
</html>
到此這篇關(guān)于css3中transition屬性詳解的文章就介紹到這了,更多相關(guān)css3 transition屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3中transform屬性實(shí)現(xiàn)的4種功能
在CSS3中，可以利用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這4中類型的變形處理。本文就詳細(xì)的介紹了這4種實(shí)現(xiàn)，感興趣的可以了解一下2021-08-05- 這篇文章主要介紹了css3 filter屬性的使用簡(jiǎn)介，幫助大家更好的理解和學(xué)習(xí)使用css3，感興趣的朋友可以了解下2021-03-30
- 這篇文章主要介紹了詳解CSS3：overflow屬性的相關(guān)資料，幫助大家更好的理解和制作CSS3特效，感興趣的朋友可以了解下2020-11-17
這篇文章主要介紹了background屬性的8個(gè)屬性值(面試題)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-11-02CSS3屬性中的text-overflow:ellipsis詳解
這篇文章主要介紹了CSS3屬性中的text-overflow:ellipsis詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-07
