Question

我在CSS的多个@media查询中有多个@keyframe动画。通过不在媒体查询内部的类分配给我的iframe视频的@keyframe动画的行为不正常。

应该转换：translateX（-100％）;不透明度：0；转换：translateX（0）;但是我只能看到从0到1的不透明度动画。

我尝试了多个类和不同的@keyframes。还是同样的问题。

HTML：

<main>
  <div class="column-main">
    <div class="column">
      <div class="column-text">
        <h3 id="hide">Blablabla</h3>
        <p id="hide" class="col-p-shift">
          Blablabla
        </p>
      </div>
      <div class="vid-contain vid-anim-go">
        <iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
    <div class="column">
      <div class="column-text">
        <h3 id="hide">Blablabla</h3>
        <p id="hide" class="col-p-shift">
          Blablabla
        </p>
      </div>
      <div id="hide" class="vid-contain vid-anim-quest">
        <iframe src="https://www.youtube.com/embed/xAngb0wRZJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
    <div class="column">
      <div class="column-text">
        <h3 id="hide-desktop">Blablabla</h3>
        <p id="hide-desktop" class="col-p-shift">
          Blablabla
        </p>
      </div>
      <div id="hide-desktop" class="vid-contain vid-anim-chronos">
        <iframe src="https://www.youtube.com/embed/YrwxZcsKIJU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</main>

CSS：

.container  { /* Mobile */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

.column-main {
  display: flex;
  position: relative;
  width: 100%;
  padding-bottom: 56%;
  margin: 8px 0 0 0;
}
iframe  {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

.bg-righttoleft {
  -webkit-animation: bg-righttoleft 3s ease-in-out;
  background-position: 50% 75%;
  background-size: 1000px;
}
.vid-anim-go  {
  animation-name: lefttoright;
  animation-duration: 3s;
}
.righttoleft  {
  animation-name: righttoleft;
  animation-duration: 3s;
}
.lefttoright  {
  animation-name: lefttoright;
  animation-duration: 3s;
}

@keyframes bg-righttoleft {
  0% {
    background-position: 20% 75%;
    opacity: 0;
  }
  100% {
    background-position: 50% 75%;
  }
}
@keyframes opacity {
  0%  {
    opacity: 0;
  }
  100%  {
    opacity: 1;
  }
}
@keyframes righttoleft {
  0%  {
    transform: translateX(100%);
    opacity: 0;
  }
  100%  {
    transform: translateX(0);
  }
}
@keyframes lefttoright {
  0%  {
    transform: translateX(-100%);
    opacity: 0;
  }
  100%  {
    transform: translateX(0);
  }
}

#hide  {
  display: none;
}
#hide-desktop  {
  display: none;
}
#hide-line  {
  display: block;
}

@media only screen /* Tablet */
  and (min-width: 885px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }

    body  {
      font-size: 1.2em;
    }
    header  {
      font-size: 1.4em;
    }
    advert  {
      background-repeat: no-repeat;
      font-size: 0.9em;
    }

    .title-shift-h3  {
      transform: translate(0, -15px);
      font-size: 1.5em;
    }
    .title-shift-p  {
      transform: translate(0, -5px);
    }

    .channel  {
      justify-content: center;
      align-content: center;
    }
    .chan-text  {
      transform: translate(0, 18px);
      margin: 0 20px 0 40px;
    }

    .column-main  {
      display: flex;
      position: relative;
      flex: 0 1 auto;
      padding-bottom: 0%;
    }
    .column  {
      display: flex;
      flex-direction: column;
      margin: 0 10px 0;
      width: 50%;
    }
    .column:nth-child(3)  {
      display: none;
    }
    .column-text  {
      min-height: 320px;
    }
    .vid-contain  {
      position: relative;
      overflow: hidden;
      padding-bottom: 56%;
    }

    .bot-bar  {
      margin: 20px 0 0 0;
      font-size: 0.9em;
    }
    .bot-bar-img-space  {
      margin: 0 0 0 10%;
    }
    .bot-bar-img-space > a {
      padding: 0 20px;
    }
    .bot-bar-a-space > a {
      margin: 0 20px;
    }

    img  {
      margin: 10px 0 0 0;
      object-fit: cover;
      width: 50%;
      height: 200px;
    }

    .vid-anim-go  {
      animation-name: lefttoright;
      animation-duration: 3s;
    }
    .vid-anim-quest  {
      animation-name: righttoleft;
      animation-duration: 3s;
    }
    .bg-righttoleft {
      background-size: 2000px;
      background-position: 50% 50%;
    }

    @keyframes bg-righttoleft {
      0% {
        background-position: 0% 50%;
        opacity: 0;
      }
      100% {
        background-position: 50% 50%;
      }
    }

    #hide  {
      display: block;
    }
    #hide-desktop  {
      display: none;
    }
    #hide-line  {
      display: block;
    }
  }

@media only screen /* Big Tablet */
and (min-width: 1170px) {
  .column-text  {
    min-height: 260px;
    padding: 20px 0 0 0;
  }
}

@media screen /* Desktop/Laptop */
  and (min-width: 1900px) {
    .container  {
      max-width: 2500px;
      grid-template-columns: 250px 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header header"
      "advert advert"
      "sidebar main"
      "footer footer";
    }

    sidebar  {
      background: url(./gear-vr.jpg);
      background-size: 100%;
    }

    .title  {
      font-size: 3.5em;
    }
    .title-shift  {
      margin: 90px 0 0 0;
    }
    .title-shift-h3  {
      transform: translate(0, -30px);
      font-size: 2em;
    }
    .title-shift-p  {
      transform: translate(0, -35px);
    }
    .channel  {
      transform: translate(0, -40px);
    }

    .news-games  {
      display: flex;
    }
    .news  {
      width: 50%;
    }
    .games  {
      width: 50%;
    }

    .column  {
      width: 33.3%;
    }
    .column:nth-child(3)  {
      display: flex;
    }
    .column-text  {
      min-height: 310px;
      padding: 20px 0 0 0;
    }

    .vid-anim-go  {
      animation-name: lefttoright;
      animation-duration: 3s;
    }
    .vid-anim-quest  {
      animation-name: opacity;
      animation-duration: 6s;
    }
    .vid-anim-chronos  {
      animation-name: righttoleft;
      animation-duration: 3s;
    }

    .bot-bar  {
      font-size: 0.9em;
    }

    img  {
      margin: 10px 0 0 0;
      object-fit: cover;
      width: 70%;
      height: 200px;
    }

    #hide-desktop  {
      display: block;
    }
    #hide-line  {
      display: none;
    }
  }

视频应从左向右滑动，不透明度从0增至1。

它不滑动。只是不透明。

Answer 1

您的代码似乎对我有用。我创建了小提琴并对其进行了测试。正确制作tansform: translateX(-100%);和opacity: 0;的动画。

您可以here对其进行测试

为什么我的移动@media查询上的@keyframe动画行为不正确？

1 个答案: