javascript - how to prevent css animation from running on page load -

i have container div set overflow:hidden swaps between 2 cards, 1 visible @ time:

[card 1 | card 2] 

i have jquery set that, when user clicks on button, toggles class, .slid, on div, stylus styling changes margin-left parameter -400 or so.

     .container             &.slid {                 margin-left: -400px; 

this works; whenever press button, cards flip , forth.

i wanted write animation cards slide , forth instead, changed stylus code to

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

with corresponding animations:

@keyframes slidein {     {         margin-left: 0px;     }      {         margin-left: -400px     }  }  @keyframes slideout {     {         margin-left: -400px;     }      {         margin-left: 0px;     }  } 

this works more or less intended, have 1 problem: since stylus code set run animation on load, page refresh run slideout animation on page load. there way around still preserves animations sliding , forth?

in opinion think instead of applying slideout animation container , toggling application of single .slid class defines slidein animation, should following:

1- not apply animation directly container class.

2- define 2 classes .slid-in (your current .slid) , .slid-out define slidein , slideout animations respectively. like:

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

3- update code in order apply .slid-in class first time button pressed, , toggling between .slid-in , .slid-out afterwards.

by doing way, prevent slideout animation applied on page load, since .container class applied right away deduced explanation.