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
