在方向更改时禁用 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>