方向改变时禁用 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 方法可以做到，但是使用 jQuery 创建效果非常容易：

$(document).ready( function(){
 $('#yourdiv').show().animate({top:'50%'},1000);
});

只需这样设置#yourdiv 的样式，以便在绝对位置时将其居中：

    display: none;
    position: absolute;
    z-index: 100000; /* on top of all others element */
    top: -50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

该效果仅在页面刷新时出现。

您甚至可以添加另一个名为 shadow 的 div 以使其更加美观:)

Answer 2

我能想到的在纯 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>

Answer 3

如果有人感兴趣，我找到了解决这个问题的另一种方法。

您必须在媒体查询中移动关键帧声明并为它们指定相同的名称。这样，正确的动画仍然会在需要时触发，并且由于它们具有相同的名称，动画计数将在第一个动画后增加到 1，并且在方向更改后不会再次触发。

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

方向改变时禁用 css 动画

Disable css animation on orientation change

css

animation

orientation

tablet