Animate CSS keyframes back to initial state

Question

I've looked over SO answers (question 1, question 2, question 2) but still can't get mine animation to work properly. I have have a simple keyframe which animates fine initially but doesn't animate back/forth when toggling the hidden class which uses animation-direction: reverse to hide the element back to initial state of the keyframe.

I would like to animate the element to translateY(0%) when show button is clicked and animate back to translateY(-50%) when hide button is clicked but the animation-timing-function: ease is not applying properly hence no animation. I also need to use keyframes for this as i will animate more complicated transformations later.

Here is what i have:

$('#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;
  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>

score 2 · Accepted Answer · answered Aug 02 '17 at 10:25

You need 2 different animations for this. Just changing the direction won't retrigger the animation.

For instance:

$('#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;
  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>

score 1 · Answer 2 · answered Aug 02 '17 at 08:33

You do not have to use @keyframes for this. You already use jQuery to add-remove classes, so you can also use jQuery to add a class onLoad and then only use translateY

First, you set translateY(-50%) on default state, on load you add class animation1 and to that class, in css, you set translateY(0) .

Then on click on hide button add class hidden ( as you do now ) and in css just add translateY(-50%) .

This will achieve what you want

See snippet below and let me know if this is what you are looking for

$(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>

I need keyframes as i will animate more complicated transformations. The setup i gave is just for demo. — g5wx, Aug 02 '17 at 08:34

Animate CSS keyframes back to initial state

2 Answers2