Question

我从codepen复制了此代码，只有5个文本循环，我想添加第6个显示，但是当我用新的类名（即“ w6”）和新的动画与“ w6anim”复制相同的样式时，它不会加载第六个waqas。请帮忙！

我尝试更改@keyframe值，但仍然无法正常工作。

@font-face {
  font-family: system;
  font-style: normal;
  font-weight: 600;
  src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}

* {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: "system";
}

.container {
  width: 200px;
}

.word {
  font-size: 3em;
  font-weight: bold;
  float: left;
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 40%;
}

.w1 {
  animation: w1anim 20s infinite;
}

.w2 {
  animation: w2anim 20s infinite;
}

.w3 {
  animation: w3anim 20s infinite;
}

.w4 {
  animation: w4anim 20s infinite;
}

.w5 {
  animation: w5anim 20s infinite;
}

.w6 {
  animation: w6anim 20s infinite;
  color: red;
}

@keyframes w1anim {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
}

@keyframes w2anim {
  10% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}

@keyframes w3anim {
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
}

@keyframes w4anim {
  30% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

@keyframes w5anim {
  40% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes w6anim {
  50% {
    opacity: 0 !important;
  }
  55% {
    opacity: 1 !important;
  }
  60% {
    opacity: 0 !important;
  }
}

<div class="container">
  <div class="word w1">LOREM</div>
  <div class="word w2">IPSUM</div>
  <div class="word w3">CARPE</div>
  <div class="word w4">DIEM</div>
  <div class="word w5">AVENO</div>
  <div class="word w6">waqas</div>
</div>

链接到密码笔https://codepen.io/waqasahmad9961/pen/bGbxpNr

Answer 1

重要！远程，在以后的情况下只需复制1：1即可。

Answer 2

@keyframes w6anim {
  50% {
    opacity: 0 !important;
  }
  55% {
    opacity: 1 !important;
  }
  60% {
    opacity: 0 !important;
  }
}

删除->！important

我正在尝试添加第6个动画，但我不知道为什么它没有显示

2 个答案: