CSS Animation Is Repeating

I have img on my page that I apply an animation when opening the page.

Attr

&.fundo-menu{
    position: absolute;
    left: 0;
    right: 0;
    top: -500px;
    opacity: 0;
    margin: auto;
    width: 312px;
    animation-name: LogoDesce;
    animation-timing-function: ease;
    animation-duration: 2s;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    transition: all 0.8s ease;
}

KeyFrame

@keyframes LogoDesce{
    100%{
        opacity: 1;
        top: -115px;
    }
}

HTML

<header id="header">
    {!! Html::image('img/open-menu-mobile.png', 'Abrir Menu Mobile', ['class'=>'open-menu-mobile']) !!}
    {!! Html::image('img/fundo-menu.png', '', ['class'=>'fundo-menu']) !!}
    <a href="{!! URL::to('/') !!}">
       {!! Html::image('img/mobile.png', '', ['class'=>'logo-menu-mobile']) !!}
       {!! Html::image('img/logotipo.png', '', ['class'=>'logo-menu']) !!}
    </a>
</header>

JS

// Ao Rolar a Página Diminui o Menu
if ($(window).width() < 1024) {
  var MenuHeaderBox = $(".fundo-menu, .logo-menu, .logo-menu-mobile");
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      MenuHeaderBox.addClass('scroll-in');
    } else {
      MenuHeaderBox.removeClass('scroll-in');
    }
  });
} else {
  var MenuHeaderBox = $("header#header, nav.menu, nav.menu > ul, nav.menu > ul > li");
  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      MenuHeaderBox.addClass('menu-fixed-scroll');
      if (!$('nav.menu > ul > li.logo-scroll')[0])
        $('nav.menu > ul').prepend("<li class='logo-scroll'><a href='" + urlBase + "'><img src='" + urlBase + "/img/torcane-logo-mobile-scroll.png'></a>");

    } else {
      MenuHeaderBox.removeClass('menu-fixed-scroll');
      $('nav.menu > ul > li.logo-scroll').remove();
    }
  });
}

That part is working. The issue is that when I roll the page down I apply a JS that hides the header of the page. This image is within header .

When I scroll up the page it is to remove the class that hides the header and show everything to normal again. But what happens is that the animation of the image repeats itself. And this is annoying.

The image is not where it left off in the animation. I need the image to be at the end of the animation, in 100% of keyframes .

How can I fix it?