scss 在最后一帧停止动画

Posted 2021-05-18

  @mixin rotating($tg) {
    -webkit-transform: rotate(#{$tg}deg);
    -ms-transform: rotate(#{$tg}deg);
    transform: rotate(#{$tg}deg);
  }
  
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    opacity: 1;
    animation: volar 5s cubic-bezier(0, 0, 0.41, 0.97) 1 forwards 0.5s;
  }
  
  @keyframes volar {
    0% {
      @include rotating(22);
      top: -150px;
    }
    33% {
      @include rotating(2);
    }
    66% {
      @include rotating(22);
      opacity: 1;
    }
    100% {
      @include rotating(12);
      top: 400px;
      opacity: 0;
    }
  }