radiodraws
5/19/2016 - 5:10 PM

stop animation at last frame

stop animation at last frame

  @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;
    }
  }