Q:

CSS animation in reverse

I have the following CSS:
@keyframes divFadeIn {
    0%{opacity:0; transform: scale(0.5)}
    100%{opacity:1; transform: scale(1)}
}

.overlay {
    position: relative;
    top: -$headerHeight;
    z-index: 1000;
    height: 100%;
    animation: divFadeIn 0.3s 1 ease-out;
}

This affects the DIV when I click a button it animates from the center to 100% width. 
However, how do I get it so that it animates backwards when I click another  button??
So I click first button - animates to 100%
I click another button - animates the opposite way to 0%

A:

For your problem, you can create another keyframes divFadeOut with opposite values with divFadeIn (animates the opposite way to 0%) and create a class fadeOut with content:
.fadeOut {
    animation: divFadeOut 0.3s 1 ease-out;
}

Remove animation from class overlay and add to class fadeIn:

.fadeIn {
    animation: divFadeIn 0.3s 1 ease-out;
}

When you click button, you can remove or add one of above animations to DIV with following code. In case, i use jQuery implement:
$('#button1').click(function() {
    $('.overlay').addClass('fadeIn');
});

$('#button2').click(function() {
    $('.overlay').removeClass('fadeIn');
    $('.overlay').addClass('fadeOut');
});

