Erik Landvall Erik Landvall - 2 months ago 6
CSS Question

css animation works only first time

The following code will fade an element in and out. When faded out it will "remove" the element by making it having no size.

The following code works as attended first time I add the class name

show-loading
to an existing element with the class
loading
. Also when I remove the class
show-loading
, at the same time as I add the class name
hide-loading
it works fine.

Second time and every time there after however, this animation is not rendered. Instead it jumps directly to the last frame in the animation, making it visible or invisible depending on if
show
or
hide
is specified. So the end result is correct, but not the animation part..

How can I make the animation take part every time I set the classes, with out the obvious; eg. remove the element and add a new to reset what ever state that is saved...?

html

<div class="loading"></div>


css

.loading
{
overflow: hidden;
position: fixed;
background: #fff;
z-index: 9999;
user-select: none;
}

.loading.show-loading
{
animation: loading-fade .4s 1 linear both;
}

.loading.hide-loading
{
animation: loading-fade .4s 1 linear both;
animation-direction: reverse;
}

@keyframes loading-fade
{
0%
{
opacity: 0;

top: auto;
right: auto;
bottom: auto;
left: auto;
}
1%
{
top: 0;
right: 0;
bottom: 0;
left: 0;
}
100%
{
opacity: 1;

top: 0;
right: 0;
bottom: 0;
left: 0;
}
}

Answer

One trick for this is to have the same animation twice but with different names.

Check out THIS fiddle.

This is a known but unexpected behavior, and you can get the desired effect by "removing" the current animation, and then applying another animation (even if it has the same structure) - that's why I used two @keyframe animations.

.loading.show-loading {
    animation: loading-fade 1s 1 linear both;
}

.loading.hide-loading {
    animation: loading-fade-backwards 1s 1 linear both;   
    animation-direction: reverse;
}