How to prevent css keyframe animation to run on page load?

Answer 1

This is not pure CSS but maybe someone will stumble across this thread as I did:

In React I solved this by setting a temporary class in ComponentDidMount() like so:

componentDidMount = () => {
    document.getElementById("myContainer").className =
        "myContainer pageload";
};

and then in css:

.myContainer.pageload {
    animation: none;
}

.myContainer.pageload * {
    animation: none;
}

If you are not familiar the " *" (n.b. the space) above means that it applies to all descendents of the element as well. The space means all descendents and the asterisk is a wildcard operator that refers to all types of elements.