Showing element activates animation in css - html

Question

When an elements display goes from none to some other value its animation(if it has any) activates.
Does anyone know how to prevent this?
Also it would be nice to understand why this happens. Is because the DOM is being reflown?
Here is an example of what I mean for reference:
https://jsfiddle.net/darlyp/2p2q767r/
HTML
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>
CSS
.red-square{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare{
0%{
margin-left: 0px;
}
50%{
margin-left: 400px;
}
100%{
margin-left: 0px;
}
}
JS
document.getElementById('btn').addEventListener("click", function() {
var currentDisplay = document.querySelector('.red-square').style.display;
if (currentDisplay === 'none') {
document.querySelector('.red-square').style.display = 'inline-block';
} else {
document.querySelector('.red-square').style.display = 'none';
}
})
https://jsfiddle.net/darlyp/2p2q767r/

Answer 1

When you display it, you could set the animation-play-state to paused.
JSfiddle
document.getElementById('btn').addEventListener("click", function() {
var currentDisplay = document.querySelector('.red-square').style.display;
if (currentDisplay === 'none') {
document.querySelector('.red-square').style.display = 'inline-block';
document.querySelector('.red-square').style.animationPlayState = 'paused';
} else {
document.querySelector('.red-square').style.display = 'none';
}
})
.red-square{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare{
0%{
margin-left: 0px;
}
50%{
margin-left: 400px;
}
100%{
margin-left: 0px;
}
}
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>

Answer 2

Another way would be to toggle opacity instead, and change the height to 0 when it's hidden so it doesn't occupy any space on the page.
document.getElementById('btn').addEventListener("click", function() {
document.querySelector('.red-square').classList.toggle('hide');
})
.red-square {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
animation: 1s both moveSquare 1;
}
#keyframes moveSquare {
0% {
margin-left: 0px;
}
50% {
margin-left: 400px;
}
100% {
margin-left: 0px;
}
}
.hide {
opacity: 0;
height: 0;
}
<div class="red-square"></div>
<br/>
<button id="btn">
Hide and Show square
</button>