Animation-fill-mode et problème d'affichage

Bonjour,

après avoir trouvé une tite librairie bien sympa pour animer son site aisément... (hum...) : smoothState. Je me heurte à un soucis d'affichage que je n'arrive pas à m'expliquer et résoudre.

En effet voici mon HTML (simplifié)

<div id="main" class="m-scene">
        <div class="bodybg scene_element scene_element--fadein"><img src="monimg.jpg" alt=""></div>
         <div class="scene_element scene_element--fadeinright">
                <a class="alacarte">+ d'informations</a>  
        </div>
</div>

Le CSS

.alacarte {
    position: fixed;
    padding: 50px 40px;
    display: block;
    background: #fff;
    width:250px;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.m-scene .scene_element {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.m-scene .scene_element--fadein {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

Impossible d'obtenir un affichage correct de ma div.alacarte avec "animation-fill-mode", en effet, si je supprime cette propriété aucun soucis mon CSS s'affiche correctement mais j'en ai besoin pour animer ma div et ça re-foire . Je ne peux pas placer mon bouton en utilisant top ou bottom, c'est n'importe quoi et ma hauteur normalement à 100% est réduire à une hauteur quelconque absolument pas définie.

Ça vous parle ? Avez-vous une explication à cela et une solution ? Je sèche complètement...

Merci