1. 案例1 transition: 2s;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
text-align: center;
line-height: 200px;
font: 50px/200px "微軟雅黑";
/* 設置 相對於父控件 水平、垂直 居中 */
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
/* 設置過渡*/
transition: 2s;
}
body:hover #test{
width: 50px;
height: 50px;
font: 10px/100px "微軟雅黑";
}
</style>
</head>
<body>
<div id="top">我是top</div>
<div id="test">
AAA
</div>
</body>
</html>
2. 綜合寫法: 過渡時間 延遲時間 過渡樣式 過渡函數
第二個默認是延遲時間
transition: 3s 3s width linear,0s 1s height ease-in-out;
3. 分開寫：
默認是:all、width、height、
不是所有的屬性都支持過渡的：支持過渡屬性查詢站點
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
3.1. transition-property: width,height,font-size; /* 過渡屬性 */
/* 如果有2個transition-property,後面的會把前面的覆蓋 */
/* 如果時間不對應，那麼內核會拷貝， 3000ms,2000ms拷貝以後 3000ms,2000ms,3000ms,2000ms */
3.2. transition-duration: 3000ms,2000ms; /* 動畫持續時間 */
3.3. transition-timing-function: linear; /* 執行估值器 */
系統估值器：
動畫的默認效果：由慢變快再變慢
linear:線性過渡，等同於貝塞爾曲線（0,0,1,1）
ease:平滑過渡，等同於貝塞爾曲線（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同於貝塞爾曲線（0.42,0,1,1）
ease-out:由快到慢，等同於貝塞爾曲線（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同於貝塞爾曲線（0.42,0,0.58,1）
4. transition-timing-function: cubic-bezier(.07,1.25,.73,-0.77)、動畫監聽結束、 transition-delay: 3000ms;
自定義效果：
https://cubic-bezier.com x表示時間，y寬度width進度, 斜率表示加速度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test{
width: 200px;
height: 200px;
border-radius: 50%;
background: pink;
text-align: center;
line-height: 200px;
font: 50px/200px "微軟雅黑";
/* 設置 相對於父控件 水平、垂直 居中 */
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: width; /* 過渡屬性 */
/* 如果有2個transition-property,後面的會把前面的覆蓋 */
transition-duration: 3000ms; /* 動畫持續時間 */
/* transition-timing-function: ease; */ /* 執行估值器 */
transition-delay: 1000ms;
transition-timing-function: cubic-bezier(.07,1.25,.73,-0.77);
}
body:hover #test{
width: 500px;
}
</style>
<script type="text/javascript">
window.onload=function(){
window.addEventListener("transitionend",function(){
alert("動畫結束");
})
}
</script>
</head>
<body>
<div id="top">我是top</div>
<div id="test">
AAA
</div>
</body>
</html>
