一、Animation 基础

使用 Animation 可以设置帧动画，与 transition 区别于 transition 需要有状态对齐变换效果进行激活，而 Animation 则不用，并且 Animation 可以设置多个时间段的关键帧状态，但 transition 只有起始与最终的两个状态。

Animation 使用 @keyframes 定义其动画的关键帧内容，例如在其状态中的 1% 位置当前动画是什么状态，又或者 10%、30%以及100%最终状态如何，我们以下使用一个示例来说明：

<style>
@keyframes move {0%{top:0px;left: 0px;}30%{top:100px;left: 300px;}60%{top:900px;left: 10px;}100%{top:0px;left: 0px;}
}
</style>

以上示例中，@keyframes 为定义关键帧的“关键字”，而 move 为当前关键帧的名称，其花括号内为当前 move 的关键帧详情内容；其中 0%{top:0px;left: 0px;} 表示在 0%（状态最初时）关键帧的状态是距离 top 为 0px，left 左部 0px，随后这个动画运行到 30% 状态后的位置信息，接下来是 60% 以及 100%。

接着我们添加一个 div 样式示例：

<style>
.box{width: 100px;height: 100px;background: #ff000d;animation:move 10s;
}
</style>

以上示例中，主要查看 animation，我们从以上样式中可以得知，animation 需要在定位布局中进行展示；animation:move 10s; 中得知，animation 是设置这个 div 的animation 属性，animation 属性可以设置两个值（暂时），一个是 move 表示需要使用到的关键帧，而 10s 是一个秒数单位，表示这个动画移动完成需要的时间数，最终我们运行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> Animation 帧动画 ——1bit 的前端课程</title><style>@keyframes move {0%{top:0px;left: 0px;}30%{top:100px;left: 300px;}60%{top:900px;left: 10px;}100%{top:0px;left: 0px;}}.box{width: 100px;height: 100px;background: #ff000d;animation:move 10s;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

效果如下：请添加图片描述

animation 的关键帧还有一种写法，如下示例，直接设置起始和结束并没有设置多余的关键帧位置，其中 form 表示 0% 而 to 表示 100%：

<style>
@keyframes move {from {top:0px;left: 0px;}to {top:100px;left: 300px;}
}
</style>

我们还可以更改更多的内容让其实现动画，查看以下示例：

<style>@keyframes move {0%{top:0px;left: 0px;background: #ff000d;}30%{top:100px;left: 300px;width:300px;background: #00ffaa;}60%{top:300px;left: 10px;background: #0059ff;}100%{top:0px;left: 0px;height:600px;background: #ff4800;}}.box{width: 100px;height: 100px;background: #ff000d;transition:all 2s;animation:move 10s 3;}
</style>