js 动画

普通

.wise-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  color: #3288ff;
  animation: wise-loading 0.6s linear 0s infinite alternate;
  /*          name        周期花费时间  开始时间  动画次数  轮流反向播放*/
}
@keyframes wise-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

立方贝塞尔曲线

transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);

ios 滚动回弹的效果的贝塞尔曲线的参数为 cubic-bezier(.17, .89, .45, 1)。

1. name
2. animation-duration 持续时间
3. animation-timing-function 动画函数
4. animation-delay 动画延迟多久开始
5. times (animation-iteration-count) 循环次数 infinite：无限循环、number: 循环的次数
6. animation-direction：normal：正常方向、reverse：反方向运行、alternate：动画先正常运行再反方向运行，并持续交替运行、alternate-reverse：动画先反运行再正方向运行，并持续交替运行
7. animation-fill-mode 动画的最后（达到100%）时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。
8. animation-play-state animation-play-state:running | paused; running:运动、paused: 暂停、animation-play-state:paused;       当鼠标经过时动画停止，鼠标移开动画继续执行