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.