CSS中的动画能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。动画运行效果良好，甚至在低

CSS中的动画

相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：

能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。

配置动画

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，

一个简单示例：

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
.box {
  height: 100px;
  width:100px;
  background-color: #007acc;
  animation: 3s move infinite alternate;
}

demo1

keyframe

定义动画的关键帧，动画在某个时间节点上的状态，比如上述示例，最左边跟最右边就是两个关键帧，元素就在最左跟最右之间变化。关键帧使用百分比定义动画的时间节点。

简单的说，animation定义动画的规则，比如时长，重复，动画曲线等，keyframe定义动画的细节，比如移动，放大缩小等。

animation

animation其实是一系列动画属性的集合，下面会逐个讲解

`animation-name`

指定由@keyframes描述的关键帧名称。

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}
@keyframes scale {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.5, 0.5);
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #007acc;
  animation-duration: 3s;
}
.box1 {
  animation-name: move;
}
.box2 {
  animation-name: scale;
}

demo_name

`animation-duration`

设置动画一个周期的时长。

.box1 {
  animation-duration: 1000ms;
}
.box2 {
  animation-duration: 3s;
}

demo_duration

`animation-timing-function`

设置动画曲线，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。关于动画曲线可以参考timing-function 内置动画曲线：

linear
ease
ease-in
ease-in-out
ease-out
step-starts
step-end

.box {
  width: 100px;
  height: 100px;
  background-color: #007acc;
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  margin-bottom: 20px;
}
.box1 {
  animation-timing-function: ease-in;
}
.box2 {
  animation-timing-function: ease-out;
}
.box3 {
  animation-timing-function: steps(3, start);
}
.box4 {
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

demo_timing_function

`animation-delay`

设置延时，即从元素加载完成到动画序列开执行的这段时间

.box {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #007acc;
  animation-name: move;
  animation-duration: 3s;
  animation-delay: 1s;
}

.box2 {
  animation-delay: 2000ms;
}

demo_delay

`animation-iteration-count`

设置动画重复次数，可以指定infinite无限次重复动画

.box {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #007acc;
  animation-name: move;
  animation-duration: 3s;
}
.box1 {
  animation-iteration-count: 2;
}
.box2 {
  animation-iteration-count: infinite;
}

demo_iteration_count

`animation-direction`

设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

.box1 {
  /* 循环向前 */
  animation-direction: normal;
}
.box2 {
  /* 循环反向 */
  animation-direction: reverse;
}
.box3 {
  /* 交替往返 */
  animation-direction: alternate;
}
.box4 {
  /* 交替往返，先反向 */
  animation-direction: alternate-reverse;
}

demo_direction

`animation-fill-mode`

指定动画执行前后如何为目标元素应用样式。

.box {
  animation-delay: 3s;
}
.box1 {
  /* 默认值，动画前后只保留原本的样式 */
  animation-fill-mode: none;
}
.box2 {
  /* 动画后保留最后一个关键帧的样式 */
  animation-fill-mode: forwards;
}
.box3 {
  /* 动画前应用第一个关键帧的样式，包括在animation-delay期间 */
  animation-fill-mode: backwards;
}
.box4 {
  /* 同时应用forwards和backwards */
  animation-fill-mode: both;
}

demo_fill_mode

`animation-play-state`

定义一个动画是否运行或者暂停。

btn.addEventListener("click", event => {
  let state = box.style.animationPlayState;
  let isRunning = !state || state === "running";
  box.style.animationPlayState = isRunning ? "paused" : "running";
  btn.textContent = isRunning ? "开始" : "暂停";
});

demo_play_state

animation顺序

animation:duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name

简单的spinners动画示例

demo_spinners

transition 过渡

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。 transition同样是几个属性的集合

`transition-property`

指定哪些CSS用于过渡，其他的不受影响，可以使用all指定全部

`transition-duration`

指定过渡的时长

`transition-timing-function`

指定过渡的动画曲线

`transition-delay`

指定延时

简写语法

transition: <property> <duration> <timing-function> <delay>;

简单示例

demo_transition