读透你的动画 &「硬件加速」

随着页面效果越来越炫酷，页面被载入的动画量也逐步提升，对设备的压力也就越来越大；开发中，如果不讲究些技巧，页面常有卡顿现象，影响了用户体验；因此，前端们又开始挖掘好用的办法，如启动设备的硬件加速功能。

# 从一个动画开始分析

  【说明】案例中没有提供适配前缀如 -webkit-，请自行添加

<div>
  <span></span>
</div>

div {
  position: relative;
}
span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 5px solid antiquewhite;
  border-radius: 50%;
  animation: run-around 4s infinite;
}

@keyframes run-around {
  0%,100% {