如何在css中动画类？

Question

我对此非常陌生，并试图动画我的"rd“类，但我不知道为什么它不是动画。我的最终目标是当我向下滚动到下一页时，第一页上的项目就会淡出。我很感谢你的帮助。到目前为止，我得到的是：科德芬

​

.rd {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  overflow: visible;
  height: 100%;
  opacity: 100%;
  animation: RD 5s infinite;
}
@keyframes rd {
  0% {
    left: 0px; opacity:100%;
  }

  50% {
    left: 200px; opacity:0%;
  }

  100% {
    left: 0px; opacity:100%;
  }
}

.crown {
  height: 200px;
}

.heart {
  position: relative;
  transform: rotateZ(45deg);
  animation: heart 1s infinite;
  margin-top: -50px;
}

@keyframes heart {
  0% {
    height: 100px;
    width: 100px;
  }

  50% {
    height: 50px;
    width: 50px;
  }

  100% {
    height: 100px;
    width: 100px;
  }
}

<div id="fullpage">
  <section class="vertical-scrolling">
    <div class="rd">
      <img class="crown" src="https://m.media-amazon.com/images/I/6176t0uwOEL._SL1200_.jpg" alt="crown" />
      <img class="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1920px-Heart_coraz%C3%B3n.svg.png">
      </d>

    </div>
  </section>
</div>

​

Answer 1

你错过了两件小事。这两个属性都在.rd类属性中。

1. animation: RD 5s infinite;您的关键帧名为带有小写字母的rd，在您的动画属性中，您使用的是大写字母的RD。两者都需要匹配，所以无论是小写还是大写-> animation: rd 5s infinite;
2. left属性需要position: relative | absolute --您的动画正在做“左”位置更改。为了改变位置(上、左、下、下、右)，您的元素需要是position: relative或position: absolute (在您的情况下)，相对就足够了。

​

.rd {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  overflow: visible;
  height: 100%;
  opacity: 100%;
  animation: rd 5s infinite;
  position: relative;
}
@keyframes rd {
  0% {
    left: 0px;
  }

  50% {
    left: 200px;
  }

  100% {
    left: 0px;
  }
}

.crown {
  height: 200px;
}

.heart {
  position: relative;
  transform: rotateZ(45deg);
  animation: heart 1s infinite;
  margin-top: -50px;
}

@keyframes heart {
  0% {
    height: 100px;
    width: 100px;
  }

  50% {
    height: 50px;
    width: 50px;
  }

  100% {
    height: 100px;
    width: 100px;
  }
}

<div id="fullpage">
  <section class="vertical-scrolling">
    <div class="rd">
      <img class="crown" src="https://m.media-amazon.com/images/I/6176t0uwOEL._SL1200_.jpg" alt="crown" />
      <img class="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1920px-Heart_coraz%C3%B3n.svg.png">
      </d>

    </div>
  </section>
</div>

​