CSS中的動畫類型
- transition補間動畫
- keyframe關鍵幀動畫
- 逐幀動畫
Transition 補間動畫
- 位置——平移（left/right/margin/transform）
- 方位——旋轉（transform）
- 大小——縮放（transform）
- 透明度（opacity）
- 其他——線性變化（transform）
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 100px;
height: 100px;
background: red;
transition: all 1s;
/* transition-timing-function: ease-in-out; */
/* transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435); */
/* transition-delay: 1s; */
}
.container:hover{
width: 800px;
background:green;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
timing（easing）
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 100px;
height: 100px;
background: red;
transition: all 1s;
transition-timing-function: ease-in-out;
/* transition-timing-function: cubic-bezier(0.465, -0.460, 0.525, 1.435); */
transition-delay: 1s;
}
.container:hover{
width: 800px;
background:green;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
keyframe 關鍵幀動畫
- 相當於過個補間動畫
- 與元素狀態的變化無關
- 定義更加靈活
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 100px;
height: 100px;
background: red;
animation: run 1s linear;
animation-direction: reverse;
/* animation-fill-mode: forwards; */
/* animation-iteration-count: infinite; */
/* animation-play-state: paused; */
}
@keyframes run{
0%{
width: 100px;
}
50%{
width: 800px;
}
100%{
width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
逐幀動畫
- 使用關鍵幀動畫實現
- 適用於無法補間計算的動畫
- 資源較大
- 使用steps(num) num用於指定關鍵幀之間的補間幀數
![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 100px;
height: 100px;
background: red;
animation: run 1s linear;
animation-direction: reverse;
/* animation-fill-mode: forwards; */
/* animation-iteration-count: infinite; */
/* animation-play-state: paused; */
}
@keyframes run{
0%{
width: 100px;
}
50%{
width: 800px;
}
100%{
width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
補充
css動畫實現的方式有幾種
- transition
- keyframes（animation）
國度動畫和關鍵幀動畫的區別
- 過度動畫需要有狀態的變化
- 關鍵幀動畫不需要狀態變化
- 關鍵幀動畫能控制更精細
如何實現逐幀動畫
- 使用關鍵幀動畫
- 使用timingfunction搭配steps去掉補間（steps（1））
CSS動畫性能
- 性能還行
- 部分情況下優於JS
- JS可以做的更好，個性化控制
- 部分高危屬性 box-shadow
