css小动画-小图标往上浮动实现

向需要往上浮动的元素加动画（例子是由下往上渐隐效果）
动画中不要使用bottom属性来将元素的位置改变，bottom使用，元素往上浮动后会有明显的回到最初位置一个过程。使用transform，则不会有明显的回到最初位置一个过程。
动画循环播放，每次都是从指定0%位置播放。（我的需要是动画单向循环播放，不需要逆向播放的）

.guide{
  position: absolute;
  width: 4.8vw;
  height: 4.5vw;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  bottom: 4vw;
  background: url('./../img/home_right_arrow.png') no-repeat center / cover;
  animation: ani_guide 2s infinite;
  opacity: 0;
}
@keyframes ani_guide {
  0% {transform: translate(-50%, 0) rotate(-90deg); opacity: 1; }
  100% {transform: translate(-50%, -5vw) rotate(-90deg); opacity: 0; }
}