Question

我有一个动画关键帧，我想在针对设备横向方向的媒体查询中进行调整。当设备处于横向状态并刷新页面时，我已经得到它来切换关键帧，但是我希望它在方向更改时自动切换关键帧而无需页面刷新。

这是css ：

@keyframes slide {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  20% {
    transform: translate3d(0px, 130px, 0px);

  }
  100% {
    transform: translate3d(0px, 0px, 0px);
  }
}
.animated-object {
  position: relative;
  animation: slide 2s infinite;
}

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
  @keyframes slide {
    20% {
      transform: translate3d(0px, 13px, 0px);
    }
  }
}

如何将此关键帧设置为在将设备旋转为横向而非需要刷新时自动切换？

Answer 1

我对您的代码进行了一些更改。在这里查看。

<强> HTML

<div class="animated-object">Animate Object<div>

<强> CSS

body {
  font: 150%/1.5 Arial;
  text-align: center;
  margin-top: 5em;
}

.animated-object {
  animation: bounce .6s alternate infinite ease-in;
  color: red;
  display: inline-block;
}

@keyframes bounce {
    0% {
      transform: translateX(50%);
    }
    100% {
      transform: translateX(-50%);
    }
}


@media only screen 
and (min-width : 100px)
and (max-width : 700px)
and (orientation : landscape) {
  @keyframes bounce {
    0% {
      transform: translateY(-200%);
    }
    100% {
      transform: translateY(0);
    }
  }
  .animated-object{
    color: green;
    display: block;
  }
}

进行演示 http://codepen.io/l3ikrant/pen/eZNrgK

Answer 2

我刚刚完成了与我基本上创建的@keyframes slidePortrait和@keyframes slideLandscape

类似的操作

然后使用@media screen and (orientation:landscape)呼叫slideLandscape和@media screen and (orientation:portrait)呼叫slidePortrait

如何在媒体查询中正确切换此动画关键帧？

2 个答案: