一些动画

//浮动
@keyframes floating{
    0%{
    opacity: 0.8;
        transform: translate(0,0);
    }
    50%{
    opacity: 1;
        transform: translate(0px,3px);
    }
    100%{
    opacity: 0.8;
        transform: translate(0,0);
    }
}
.floating {
  animation: floating 2s linear infinite;
}
//转圈
@keyframes clockwise{
  100%{
    transform: rotate(360deg)
  }
}
@keyframes anti-clockwise{
  0%{
    transform: rotate(360deg)
  }
}
//渐变
@keyframes breath {
  /* 动画开始时的不透明度 */
  from {
      opacity: 0.5;
  }
  /* 动画50% 时的不透明度 */
  50% {
      opacity: 1;
  }
  /* 动画结束时的不透明度 */
  to {
      opacity: 0.5;
  }
}
.twinkle{
  webkit-animation: breath 2s infinite ease-in-out;
  -webkit-animation: breath 2s infinite ease-in-out;
}
//上下跳动
@keyframes animate {
  0%,
  40%,
  100% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(8px);
  }
}