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中我能想到的唯一方法是使用单个动画。

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

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

在另一个方向，我们也将在中间开始，但我们将反向执行并在开始时结束

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

可能有一种CSS方法，但使用jQuery创建效果非常容易：

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

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

    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 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动画

3 个答案: