CSS Animation Is Repeating

Question

I have a img on my page applying 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();
    }
  });
}

It’s working that part. The point is that when I roll the page down I apply a JS that hides the header page. This image is inside the 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. And this is irritating.

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

Is it possible to correct ?