Question 43633 in Html Question posted in
Some basic documentation can be found here.

CSS animation does not play until I click on tab – Html

I have a React app that creates elements that exist for 5 seconds and destroys them. Each of those elements have the same CSS animation assigned:

animation: move-up 5s linear;

The idea is that the element moves from the bottom to the top of the screen in 5 seconds. The app receives messages on when to create one of these elements. It will always destroy them 5 seconds after creation.

This works fine when I have the tab open. However, if I was on another tab, the CSS animation would not play until I tab back in. This is very apparent because the element would be destroyed before it flies to the top of the screen. It gets destroyed correctly after 5 seconds, but the CSS animation does not play immediately and only starts after I tab back in.

Is there any way to kickstart the CSS animation even while on a different tab?

Tags:

2

Answers


  1. 0

    I think you should try to create your animation in javascript like :

    function moveUp() {
        setTimeout(function () {
            document.getElementById("yourAnim").animate([
                { color: "red" },
                { color: "black" },
                { color: "red" },
            ], {
                duration: 5000
            });

        }, 5000)
    }

moveUp()

    It may solve your problem

    Login or Signup to reply.
  2. 0

    You need to make sure that your animated element is rendered and not set to display: none. You can instead set it to visibility: hidden and it should still animate behind the scenes.

    For example, in the snippet below if you click "add" three times rapidly, you’ll get three animations – one always visible, one with display: none, and one with visibility: hidden. The two that aren’t always visible will become visible after two seconds. You’ll see that the visibility: hidden one will be partially to the top when it shows up, but the display: none one will start at the bottom (and then be removed about halfway up).

    let i = 0;
document.getElementById('add').addEventListener('click', function() {
    const div = document.createElement('div');
    div.classList.add('a');
    div.innerHTML = 'test';
    if (i % 3 == 1) {
        div.style.display = 'none';
        div.innerHTML += ': display none';
        setTimeout(() => {
            div.style.display = 'block';
        }, 2000);
    }
    else if (i % 3 == 2) {
        div.style.visibility = 'hidden';
        div.innerHTML += ': visibility hidden';
        setTimeout(() => {
            div.style.visibility = 'visible';
        }, 2000);
    }
    i++
    document.getElementById('container').appendChild(div);
    setTimeout(() => {
        div.remove()
    }, 5000);
});
    .a {
    animation: move-up 5s linear;
    position: absolute;
}

#container {
    border: solid 1px black;
    height: 200px;
    width: 200px;
}

@keyframes move-up {
   from { top: 200px    }
   to   { top: 50px }
}
    <button id="add">Add</button>

<div id="container"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search