How to animate a class in css?

Issue

I am very new to this and trying to animate my "rd" class but I can not figure out why it is not animating. My final goal is when I scroll down to next page the items on the first page will fade out. I would appreciate any help. here what I got so far: Codepen

.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>

Solution

There are two small things you are missing. Both are in your .rd class properties

1. animation: RD 5s infinite;Your keyframe is named rd with small letters, in your animation property you are using RD with uppercase letters. Both need to match, so either both lower case or uppercase -> animation: rd 5s infinite;

2. left property needs position: relative | absoluteYour animation is doing a "left" position change. In order to change positions (top | left | bottom | right), your element need to be position: relative or position: absoluteIn your case relative is enough

.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>

Answered By - Hoargarth