How to animate a class in css? - html

Question

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>

Answer 1

There are two small things you are missing.
Both are in your .rd class properties
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;
left property needs position: relative | absolute
Your 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: absolute
In 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>