Why is the animation rot-corona not working? - css

Question

I am working on a coronavirus project and the animation rot-corona is not working I want it to rotate 360 degrees after every 3 sec
and for a note bootstrap-4 is included in it
Code
/* SCSS */
#rotate-corona-text {
h1 {
font-size: 3rem;
}
img {
width: 100px;
height: 100px;
}
#rotate-corona-text {
img {
animation: rot-corona 3s linear infinite;
}
}
}
<section id="main-header" class="py-4">
<div class="container py-4">
<div class="row border py-4 align-items-center justify-content-between">
<div class="col-12 col-md-4 order-2 order-lg-1 " id="unity-images">
</div>
<div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
<h1 class="text-primary">lets stay safe and fight against cor<span id="rotate-cororna"><img src="./assets/corona-icon.jpg" alt=""></span>na </h1>
</div>
</div>
</div>
</section>
and for the image which I want to rotate is https://ibb.co/qFSqkyq

Answer 1

SCSS compiles to this:
#rotate-corona-text h1 {
font-size: 3rem;
}
#rotate-corona-text img {
width: 100px;
height: 100px;
}
#rotate-corona-text #rotate-corona-text img {
animation: rot-corona 3s linear infinite;
}
Note that the 3rd statement has a multiple ID selector that does not select the node required.
You are missing #keyframes to define the animation that you have declared for the img.
Output:
#rotate-corona-text h1 {
font-size: 3rem;
}
#rotate-corona-text img {
width: 100px;
height: 100px;
}
#rotate-corona-text img {
animation: rot-corona 6s infinite; /* 6s because 50% is completed at 3s. */
}
#keyframes rot-corona {
0% {
transform: rotate(0);
}
50% {
transform: rotate(360deg); /* CSS does not offer animation-delay between iterations. This is a hack */
}
100% {
transform: rotate(360deg);
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="main-header" class="py-4">
<div class="container py-4">
<div class="row border py-4 align-items-center justify-content-between">
<div class="col-12 col-md-4 order-2 order-lg-1 " id="unity-images">
</div>
<div class="col-12 col-md-7 order-1 order-lg-2" id="rotate-corona-text">
<h1 class="text-primary">Lets stay safe and fight against Cor<span id="rotate-cororna"><!-- Transparent background for you --><img src="https://i.stack.imgur.com/9Wifk.png" alt=""></span>na </h1>
</div>
</div>
</div>
</section>