CODEWITHSUNDEEP
cssanimation
superhero
superhero

Reputation: 6482

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;
  }
}

Upvotes: 3

Views: 4958

Answers (1)

Mihai Cicu
Mihai Cicu

Reputation: 1918

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;
}

Upvotes: 6

Related Questions