How to Prevent a CSS Keyframe Animation from Running on Page Load

How to prevent a CSS keyframe animation from running on page load?

Solution 1 - Add down animation on first hover

Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.

This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.

;(function(){    var c = document.getElementById('container');    function addAnim() {        c.classList.add('animated')        // remove the listener, no longer needed        c.removeEventListener('mouseover', addAnim);    };
    // listen to mouseover for the container    c.addEventListener('mouseover', addAnim);})();

#container {    position:relative;    width:100px;    height:100px;    border-style:inset;}#content {    position:absolute;    top:100px;    width:100%;    height:100%;    background-color:lightgreen;    opacity:0;}
/* This gets added on first mouseover */#container.animated #content {    -webkit-animation:animDown 1s ease;}
#container:hover #content {    -webkit-animation:animUp 1s ease;    animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes animUp {    0% {        -webkit-transform:translateY(0);        opacity:0;    }    100% {        -webkit-transform:translateY(-100%);        opacity:1;    }}@-webkit-keyframes animDown {    0% {        -webkit-transform:translateY(-100%);        opacity:1;    }    100% {        -webkit-transform:translateY(0);        opacity:0;    }}

<div id="container">    <div id="content"></div></div>

How to prevent css keyframe animation on page load?

All you should need to do is:
animation-play-state: paused;

However, having a look at your codepen, keyframe animations probably aren't your best best. It looks like you're just using the keyframes to ensure some of your properties only change at the end of the animation. Luckily, there's actually a transition timing function for this!

Use transition property, using step-end and step-start for visibility and pointer-events.
Pointer events used to prevent interaction with a hidden element.
Max-height used to remove the object from document flow when hidden.

I've spun together a quick code pen to show an example.

http://codepen.io/SudoCat/pen/LkvyEJ?editors=0100

Stop Keyframe animation from automatic start on page load

Use the animation-play-state property to set the animation to paused initially

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

Prevent CSS3 animation from firing after page load

You could simplify what you have a bit.

Working Example

$('#btnLogin').click(function() {  $('.panel').toggleClass('active');});

.panel {  background-color: red;  height: 200px;  opacity: 0;  width: 200px;  transition: 2s;}.panel.active {  opacity: 1;  transition: 2s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="body">  <div class="panel"></div></div><button id="btnLogin">Login</button>

how to prevent css animation from running on page load

In my opinion I think that instead of applying the slideout animation to the container and toggling the application of a single .slid class which defines the slidein animation, you should do as following:

1- Do not apply the animation directly to the container class.

2- Define two classes .slid-in (your current .slid) and .slid-out that define the slidein and slideout animations respectively. Something like:

.container{
        &.slid-in {
            margin-left: -400px;
            animation: slidein 1s;
        }
        &.slid-out {
            margin-left: 0px;
            animation: slideout 1s;
        }
}

3- Update your code in order to apply the .slid-in class the first time the button is pressed, and toggling between .slid-in and .slid-out afterwards.

By doing it this way, you would prevent the slideout animation to be applied on page load, since the .container class is applied right away as deduced from your explanation.

Keyframes animation running on page load in React app

You can set the animation class after the action is performed.

In the current problem you are setting width2 animation onload, Because you are evaluating against this.state.value onload. A simple solution in your case is you can introduce an optional state where the value is undefined or null and then toggle the class based on action.

this.state = {
  value: ""
};

  getToggleClass = () => {
    if (this.state.value === "") {
      return "";
    } else {
      return this.state.value ? "width" : "width2";
    }
  };


   <div
      id="index-mobile-navigation-container"
      className={this.getToggleClass()}
    >

I don't know what is the animation you are trying to achieve.
But I have attached a code-sandbox link, with the above snippet. see if it helps

https://codesandbox.io/s/funny-stonebraker-o0sl1

How to Prevent a CSS Keyframe Animation from Running on Page Load