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>
