CSS 动画
一、动画的定义
许多静止的画面以一定的速度（如每秒 30 张）连续播放（FPS 就是 30 了）。
而我们肉眼因视觉残象产生错觉误以为是活动的画面。（这就是人脑的 BUG 吗？i 了 i 了）
帧：每个静止的画面。
二、CSS 动画
那么我们用 CSS 如何实现呢？
一个简单的例子：将一个 div 盒子从左向右移动
PS:我不知道如何上传视频演示,下面的演示也是一样。请知道如何上传视频的小伙伴留言告诉下我。我好修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS动画</title>
<style>
.flash {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px;
}
</style>
</head>
<body>
<div class="flash"></div>
<script>
let div = document.querySelector(".flash");
let distance = 0;
var timer = setInterval(() => {
if (distance <= 400) {
div.style.left = distance + "px";
distance += 10;
} else {
clearInterval(timer);
}
}, 100);
</script>
</body>
</html>
三、前端做动画的两种方法（高手都不用改变 left 的形式做）
transition
animation
1.transition 做法
作用：用于过渡，补充中间帧
语法格式
transition : 属性名1 时长 过渡方式 延迟, 属性名2 时长 过渡方式 延迟 ......
过渡方式： linear | ease | ease-in | ease-out | cubic-bezier | step-start | step-end | steps
属性名： all | none | 或者是像单个 width、heght 的属性
同样的例子用 transition 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS动画</title>
<style>
.flash {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px;
transition: all 1s;
}
</style>
</head>
<body>
<div class="flash"></div>
<button>点击开始</button>
<script>
var div = document.querySelector(".flash");
var btn = document.querySelector("button");
btn.onclick = () => {
div.style.left = "400px";
};
</script>
</body>
</html>
2、animation 做法：
作用：css 设置的一个专门做动画的东西
语法格式
:
①声明关键帧：@keyframes 动画名
{}
写法
1：
from to
@keyframes 动画名
{
from{
}
to
{
}
}
写法
2（最常用）：百分数
@keyframes 动画名
{
0% {
}
50% {
}
60%,78%{
}
100% {
}
}
②animation
: 动画名
| 时长
| 过渡方式
| 延迟
| 次数
| 方向
| 填充模式
| 是否暂停
过渡方式： 同 transition 一样
次数：3 | 2.4 | Infinite 方向： reverse | alternate (来回折返) | alternate-reverse
填充模式（控制动画最后一帧停在哪儿）： none | forwards | backwards | both
是否暂停： paused | running
注：以上属性都可以单独列出来（即可通过 JS 代码来修改）
div.style.animationPlayState = "paused";
同样的例子用 animation 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS动画</title>
<style>
.flash {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 100px;
animation: move_div 1s forwards;
}
@keyframes move_div {
0% {
transform: none;
}
100% {
transform: translateX(300px);
}
}
</style>
</head>
<body>
<div class="flash"></div>
</body>
</html>
四、动画的优化
---------传送门
