本文參考：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法： <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
本文參考：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
1. transition基本用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s; //如果不使用 transition 滑鼠移到img 上面時是馬上變化的，加上這個屬性，變化就會持續一秒的過程
}
img:hover {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<img src="./o_200404110308weixin_20191025171935.jpg" alt="" />
</body>
</html>
我們還可以指定 height 或者 width 等屬性的變化
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s height;
}
這種寫法表示只有 img 的height 有持續1s 的過度屬性，如果想高度變化在變化寬度，可以指定delay參數
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s height, 1s 1s width;
}
transiton 的狀態變化速度預設不是勻速的，而是逐漸放慢的，這叫做 ease
img {
width: 50px;
height: 50px;
display: block;
margin: auto;
transition: 1s height, 1s 1s width ease;
}
除了可以取值ease 以外，還有其他模式
1. linear : 勻速 2.ease-in: 從慢到快 3.ease-out: 從快到慢 4.cubic-bezier函數：自定義速度模式
cubic-bezier可以用工具網址：https://cubic-bezier.com/#.17,.67,.83,.67 來定製
img{
transition: 1s height cubic-bezier(.83,.97,.05,1.44);
}
使用transition 的註意事項：
1.目前各大瀏覽器都已經支持無首碼的 transition ，所以可以很安全的使用
2.不是所有css 屬性都支持 transition
3. transition 需要明確知道開始狀態和結束狀態的具體數值，也就是說如果開始或結束的設置是 height：auto，那麼不會產生動畫效果，類似的情況還有, display:none到 block background:url(foo,jpg)到url(bar.jpg)等等
transition 的局限：
1. transiton 需要事件觸發，所以沒辦法在網頁載入時自動觸發
2.transition 是一次性的，不能重覆發生，除非一再觸發
3.transition 只能有兩個狀態
2.Animation
首先，css Anmiation 需要指定動畫一個周期持續時間
.donghua {
animation: 1s rainbow;
}
上面的代碼表設計，給.donghua 這個class 添加一個 動畫，我們需要定義動畫的rainbow 動畫效果
@keyframes rainbow {
0% {
background: red;
}
50% {
background: orange;
}
100% {
background: yellowgreen;
}
觸發動畫
<div id="div1"></div>
<button onclick="donghua()">點我</button>
<script>
let div1 = document.getElementById('div1')
function donghua() {
div1.classList.add('donghua')
}
</script>
預設情況下，動畫只能播放一次，加入 infinite 關鍵可以讓動畫無限播放
.donghua {
animation: 1s rainbow infinite;
}
也可以指定動畫具體播放次數
.donghua {
animation: 1s rainbow 3;
}
動畫結束以後，會立即從結束狀態跳回起始狀態。如果想讓動畫保持在結束狀態可以使用
animation-fill-mode屬性。
.donghua {
animation: 1s rainbow forwards;
}
animation-fill-mode 的其他值
1. none :預設值，回到動畫沒開始的狀態 2.backwards : 讓動畫回到第一幀的狀態 3.forwars : 結束狀態
有時，動畫播放過程中突然停止，這時，預設跳回到動畫開始時的狀態，如果想要動畫保持結束的位置，可以使用 animation-play-state屬性
.donghua {
animation: 1s rainbow infinite;
animation-play-state: paused;
}
.donghua:hover {
animation-play-state: running;
}
