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