animation漂浮、呼吸、渐变、滚动（带效果图）

animation属性值(有六个)：

语法：animation: name duration timing-function delay iteration-count direction;

一、animation-name：规定需要绑定到选择器的 keyframe 名称
取值：
none：（默认）规定无动画效果（可用于覆盖来自级联的动画）
keyframename：规定需要绑定到选择器的 @keyframe 的名称

二、animation-duration：规定完成动画所花费的时间 以秒或毫秒计
取值：2s（两秒）
time：规定完成动画所花费的时间 默认值是 0 意味着没有动画效果

三、animation-timing-function：规定动画的速度曲线
取值：
ease：默认。动画以低速开始，然后加快，在结束前变慢
linear：动画从头到尾的速度是相同的
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束
cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值 可能的值是从 0 到 1 的数值

四、animation-delay：规定在动画开始之前的延迟
取值：
time：（可选）定义动画开始前等待的时间 以秒或毫秒计 默认值是 0

五、animation-iteration-count ： 规定动画应该播放的次数
取值：
n：定义动画播放次数的数值
infinite：规定动画应该无限次播放

六、animation-direction ：规定是否应该轮流反向播放动画
取值：
normal：默认值。动画应该正常播放
alternate：动画应该轮流反向播放

1、使用@keyframes规则定义动画

如1：上下漂浮动画

@keyframes float-vertical {
  0% {
    transform: translate3d(0, 0%, 0);
  }
  25% {
    transform: translate3d(0, 5%, 0);
  }
  75% {
    transform: translate3d(0, -5%, 0);
  }
  100% {
    transform: translate3d(0, 0%, 0);
  }
}

2、给要使用动画的地方加：

.s-ranking {
	animation: float-vertical 1.5s infinite linear;
 }

---

如2：呼吸动画

// scale-breathe这个是可以随意起的名字
@keyframes scale-breathe {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

使用：

&NEXT {
    animation: scale-breathe 2s infinite linear;
  }

---

如3：渐变动画

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

使用：

&-top {
      animation: fade-in 3s;
    }

---

如4：滚动动画

@keyframes roll-in {
  0% {
    transform: translate3d(-5rem, 0, 0) rotate(740deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

使用：

&hat {
      animation: roll-in 2s linear;
      z-index: 10;
    }