@keyframes myAnimation {
  0% {
    bottom: -100%;
    left: -100%;
  }
  100% {
    bottom: -5.594034%;
    left: -27.2727273%;
  }
}
.active-animation {
  animation-name: NavImageAnimation; // 动画的名称
  animation-duration: 1s; // 动画完成一个周期所需要的时间
  animation-timing-function: linear; // 动画的曲速
  /*
    linear    动画从头到尾的速度是相同的。
    ease    默认。动画以低速开始，然后加快，在结束前变慢。
    ease-in    动画以低速开始。
    ease-out    动画以低速结束。
    ease-in-out    动画以低速开始和结束。
    cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  */
  animation-delay: 0s; // 动画在多少秒后开始播放
  animation-iteration-count: 1; // 动画的播放次数 默认为1|infinite（无限次）
  animation-direction: normal; // 动画是否在下一个周期逆向播放，默认是normal，alternate（每一次都反方向运动）
  animation-play-state: running; // 规定动画正在运行或停止 默认 running（运行态） ，paused（暂停）可以通过此属性停止动画的播放
  animation-fill-mode : forwards; // none默认 | forwards动画完成后保持最后一个状态 | backwards | both;
}
.active-transition {
  transition-property: top, left;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

通过class操作动画，过渡

.classA {
    position: absolute;
    top: -100px;
}
.classA.default-animation {
    top: -100px;
}
.classA.over-animation {
    animation-name: TopTransition;
}
@keyframes TopTransition{
  0% {
      top: -100%;
  }
  100% {
      top: 10px;
  }
}
.active-animation {
  animation-duration: 1s; // 动画完成一个周期所需要的时间
  animation-timing-function: linear; // 动画的曲速
  /*
    linear    动画从头到尾的速度是相同的。
    ease    默认。动画以低速开始，然后加快，在结束前变慢。
    ease-in    动画以低速开始。
    ease-out    动画以低速结束。
    ease-in-out    动画以低速开始和结束。
    cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  */
  animation-delay: 0s; // 动画在多少秒后开始播放
  animation-iteration-count: 1; // 动画的播放次数 默认为1|infinite（无限次）
  animation-direction: normal; // 动画是否在下一个周期逆向播放，默认是normal，alternate（每一次都反方向运动）
  animation-play-state: running; // 规定动画正在运行或停止 默认 running（运行态） ，paused（暂停）可以通过此属性停止动画的播放
  animation-fill-mode : forwards; // none默认 | forwards动画完成后保持最后一个状态 | backwards | both;
}