css - 在方向更改时禁用 css 动画

Question

所以我使用 css 动画和媒体查询为平板电脑制作了两个动画。

动画的主要作用是使 div 在平板电脑纵向中从上到中动画化，在平板电脑横向中从左到中动画化。

当页面以纵向方式加载时，它会正确地从上到中进行动画处理。但是当方向更改为横向时，它会从左到中启动第二个动画。如果先横向，则相同。

我想要的是动画只在页面加载时运行一次，而不是每次方向改变时都触发。

最好不要javascript，只有css。

这里是它如何工作的一些代码:

@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;
  }
}

编辑:

动画一定不能用jQuery来做，只能用css动画来做。这是要求。

另外，动画有点复杂，我只把最简单的放在这里。

主要是它只在页面加载时运行，而不是在方向改变时运行。

Answer 1

我能想到的在纯 CSS 中做到这一点的唯一方法是使用单个动画。

这样浏览器就认为动画已经完成，并且不会再次触发它。

在一个方向上，我们将使用一半的动画，从中间开始，到最后结束。

在另一个方向上，我们也会从中间开始，但是我们会反向执行，从头开始结束

@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>