transition补间动画，过度动画

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
  transition-delay: 2s;
  // 上面两个合并写
  // 延迟2s执行，动画时长1s
  transition: 2s width 1s;
  // 多个动画可以以','隔开
  transition: width 1s, background-color 2s, transition-delay 2s;
  // 动画的进度函数
  transition-timing-function: ease;
}
.box:hover {
  width: 500px;
  background-color: green;
}

关键帧动画

关键帧过度期间由计算机模拟计算

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
  transition-delay: 2s;
  // 上面两个合并写
  // 延迟2s执行，动画时长1s
  transition: 2s width 1s;
  // 多个动画可以以','隔开
  transition: width 1s, background-color 2s, transition-delay 2s;
  // 动画的进度函数
  transition-timing-function: ease;
}
.box:hover {
  width: 500px;
  background-color: green;
}

逐帧动画

关键帧过度期间不会由计算机来模拟计

.box3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background: url(./animal.pgn) no-repeat;
  animation: run 1 infinite;
  // steps(1)表示关键帧之间没有过度图片,最好设置成1，去掉补间
  // steps(2)表示关键帧之间有1个过度图片
  animation-timing-function: steps(1);
}

@keyframes run {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -100px 0;
  }
  50% {
    background-position: -200px 0;
  }
  75% {
    background-position: -300px 0;
  }
  100% {
    background-position: 0 0;
  }
}