Animer les images-clés CSS à l'état initial

Question

J'ai regardé les réponses SO (question 1, question 2, question 2) mais je n'arrive toujours pas à faire fonctionner correctement mon animation. J'ai une simple image clé qui s'anime au début mais qui n'anime pas le retour hidden class qui utilise animation-direction: reverse pour cacher l'élément à l'état initial de l'image-clé.

Je voudrais animer l'élément à translateY(0%) lorsque le bouton show est cliqué et animer revenir à translateY(-50%) lorsque le bouton est cliqué cacher mais le animation-timing-function: ease n'applique pas correctement donc pas d'animation. J'ai aussi besoin d'utiliser des images clés pour cela car j'animerai des transformations plus compliquées plus tard.

Voici ce que j'ai:

$('#show').on('click', function() { 
 
\t $('#slide').removeClass('hidden'); 
 
}); 
 
$('#hide').on('click', function() { 
 
\t $('#slide').addClass('hidden'); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-duration: 0.4s; 
 
    animation-delay: 0s; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: both; 
 
} 
 
#slide.animation1 { 
 
    animation-name: slide; 
 
} 
 
#slide.hidden { 
 
    animation-direction: reverse; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
     opacity: 0; 
 
     transform: translateY(-50%); 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" class="animation1"> 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>

Answer 1

Vous avez besoin de 2 animations différentes pour cela. Changer juste la direction ne va pas redéclencher l'animation.

Par exemple:

$('#show').on('click', function() { 
 
\t $('#slide').removeClass('hidden'); 
 
}); 
 
$('#hide').on('click', function() { 
 
\t $('#slide').addClass('hidden'); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    animation-iteration-count: 1; 
 
    animation-direction: normal; 
 
    animation-duration: 0.4s; 
 
    animation-delay: 0s; 
 
    animation-timing-function: ease; 
 
    animation-fill-mode: both; 
 
     opacity: 0; 
 
     transform: translateY(-50%); 
 
} 
 
.animation1 { 
 
    animation-name: slide; 
 
} 
 
#slide.hidden { 
 
    animation-name: slide2; 
 
} 
 
@keyframes slide { 
 
    to { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
} 
 
@keyframes slide2 { 
 
    from { 
 
     opacity: 1; 
 
     transform: translateY(0%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" class="animation1"> 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>

Answer 2

Vous ne devez pas utiliser @keyframes pour cela. Vous utilisez déjà jQuery pour ajouter-supprimer des classes, vous pouvez également utiliser jQuery pour ajouter un onLoad de classe, puis utilisez uniquement translateY

D'abord, vous définissez translateY(-50%) sur l'état par défaut, sur la charge que vous ajoutez la classe animation1 et à cette classe, en CSS, vous définissez translateY(0).

Puis, au clic sur le bouton hide, ajoutez la classe hidden (comme vous le faites maintenant) et en css, ajoutez simplement translateY(-50%).

Cela permettra d'atteindre ce que vous voulez

Voir extrait ci-dessous et laissez-moi savoir si cela est ce que vous cherchez

$(window).on("load", function() { 
 
    $("#slide").addClass("animation1") 
 
    $('#show').on('click', function() { 
 
    $('#slide').removeClass('hidden'); 
 
    }); 
 
    $('#hide').on('click', function() { 
 
    $('#slide').addClass('hidden'); 
 
    }); 
 
});

#slide { 
 
    background: #333; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    width: 200px; 
 
    padding: 20px; 
 
    margin-bottom: 30px; 
 
    display: block; 
 
    transform: translateY(-50%); 
 
    transition: 0.3s; 
 
} 
 

 
#slide.animation1 { 
 
    transform: translateY(0%) 
 
} 
 

 
#slide.hidden { 
 
    transform: translateY(-50%) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slide" > 
 
    <p>Lorem ipsum dolor sit amet, ius no feugiat vulputate, hendrerit quaerendum instructior ei eum. Fabellas percipitur definitionem ex vel.</p> 
 
</div> 
 
<button id="show">Show</button> 
 
<button id="hide">Hide</button>