css3中通過transition屬性可以實現一些簡單的動畫過渡效果~
1、語法
transition: property duration timing-function delay;
transition 屬性設置元素當過渡效果，是一個復合屬性，包括四個簡寫屬性：
- transition-property：指定CSS屬性的name，transition效果（默認值：all）
- transition-duration（必須）：過渡效果持續時間（不指定默認為0，不會有任何效果）
- transition-timing-function：指定過渡效果的轉速曲線（默認值：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;
/* 復合屬性 */
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 復合屬性時，各個屬性用空格隔開，不能使用 ,
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屬性可以用來設置一個屬性過渡所需要的時間，也就是該屬性從舊值到新值過渡所需時間（持續時間），默認值為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;
}
注意：
- 不能為負值
- 必須帶上單位，單獨一個數字無效
- 該值為單值時，即所有過渡屬性都對應同樣時間；該值為多值時，過渡屬性按照順序對應持續時間
.tra{
width: 50px;
height: 50px;
display: block;
background-color: lightcoral;
transition-property: width,background;
transition-timing-function: ease;
transition-duration: 5s, 2s;
/* 以上分屬性等價於下面復合屬性寫法 */
transition: width 5s ease 0, background 2s ease 0;
}
.tra:hover{
width: 100px;
background-color: blue;
}
當該值為多值時，過渡屬性按照順序對應持續時間
（3）transition-timing-function
transition-timing-function屬性指的是過渡的“緩動函數”，用來指定屬性過渡時動畫運動形式，值可以是關鍵字、貝塞爾曲線（bezier），默認值為ease
關鍵字：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 ：開始和結束慢，中間快
linear ：勻速
ease-in ：開始慢，越來越快
ease-out ：結束慢，越來越慢
ease-in-out ：先加速后減速，與ease類似，但比ease幅度大
cubic-bezier(n,n,n,n) 貝塞爾曲線中4個值隨意調整，就會得到不同的效果
.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過后過渡才開始執行 */
transition: 1s cubic-bezier(.75,2.03,0,.14) 2s;
}
.tra:hover{
border-radius: 50%;
background-color: blue;
}
3、結束語
最后再說明補充兩點內容：
1、觸發方式：transition屬性並非只有hover才能觸發，其他比如【點擊事件】【獲得/失去焦點】【長按】等操作都可以觸發transition屬性過渡
2、事件回調：transition屬性只有一個事件，那就是transitionend事件，它在過渡事件完成后觸發
<!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>
//監聽 transitionend 事件
test.addEventListener("transitionend", myFunction);
// 回調函數
function myFunction(e){
e = e || event;
test.innerHTML = "過渡結束，執行事件回調內容"
}
</script>
</html>
本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15798162.html
轉 https://www.cnblogs.com/libo-web/p/15798162.html