Disable css animation on orientation change

Question

So I made two animations for tablet using css animation and media query.

The main thing animation does is animate the div from top to center in tablet portrait and from left to center in tablet landscape.

When the page loads in portrait it animates correctly from top to center. But when the orientation is changed to landscape it starts the second animation from left to center. The same if it is in landscape first.

What I want is to animation to run only once on page load, and not trigger every time orientation changes.

Preferably without javascript, only css.

Here is a bit of code of how it works:

@keyframes leftToCenter {
  from {
    margin-left: -100vw;
  }
  to {
    margin-left: 0;
  }
}
@keyframes topToCenter {
  from {
    margin-top: -100vh;
  }
  to {
    margin-top: 0;
  }
}
@media only screen and (orientation: portrait) {
  .div {
    animation-name: topToCenter;
    animation-duration: 1s;
  }
}
@media only screen and (orientation: landscape) {
  .div {
    animation-name: leftToCenter;
    animation-duration: 1s;
  }
}

Edit:

The animation must not be done with jQuery, it should be done only with css animation. This is the requirement.

Also, the animation is a bit more complicated, I just put the simplest version of it here.

The main thing is that it runs only on page load, and not on orientation change.

Answer 1

The only way that I can think of to do that in pure CSS involves the use of a single animation.

This way the browser asumes the animation has finished, and won't trigger it again.

In one orientation, we will use half of the animation, beginning at the middle, and ending at the end.

In the other orientation, we will begin also at the middle, but we will execute it in reverse and end at he beginning

@keyframes dual {
  from {
    margin-left: 0;
  }
  49.9% {
    margin-left: -100vw;
    margin-top: 0;
  }
  50% {
    margin-left: 0;
    margin-top: -100vh;
  }
  to {
    margin-top: 0;
  }
}
@media only screen and (orientation: portrait) {
  .element {
    animation-name: dual;
    animation-duration: 2s;
    animation-delay: -1s;
  }
}
@media only screen and (orientation: landscape) {
  .element {
    animation-name: dual;
    animation-duration: 2s;
    animation-delay: -1s;
    animation-direction: reverse;
  }
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

<div class="element"></div>

Answer 2

In case anyone's interested, I found another solution to this problem.

You have to move the keyframes declaration inside the media query and give them the same name. That way the right animation still gets triggered when needed, and as they have the same name animation count will increese to 1 after first animation and won't trigger again after orientation change.

@media only screen and (orientation: portrait) {
@keyframes animation{
  from {
    margin-top: -100vh;
  }
  to {
    margin-top: 0;
  }
}  
.div {
    animation-name: animation;
    animation-duration: 1s;
  }
}
@media only screen and (orientation: landscape) {
@keyframes animation{
  from {
    margin-left: -100vw;
  }
  to {
    margin-left: 0;
  }
}
  .div {
    animation-name: animation;
    animation-duration: 1s;
  }
}