I attempted to animate the rotation of a circle and display the content of a specific image by pausing it for a period of time. However, I am unsure how to halt the animation and display the content of the specified image.
Here's what I tried: HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./rotate.css">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358475845">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c994d0dad6d7caf98897809788">[email protected]</a>/font/bootstrap-icons.css" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a958a97">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="parent-circle">
<div class="circle blue"></div>
<div class="circle pink"></div>
<div class="circle lime"></div>
<div class="circle orange"></div>
</div>
<div class="mt-5 content pt-2 ">
<h1>Health Record</h1>
<p class="w-75">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, doloremque!</p>
</div>
</body>
</html>
CSS Code
body {
width: 90vw;
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body #parent-circle {
position: relative;
width: 20vw;
height: 20vw;
border: 0.4vw solid rgba(0, 0, 0, 0.4);
border-radius: 50%;
transform: rotate(0deg);
transition: transform 0.7s linear;
animation: rotate 20s infinite linear;
}
body #parent-circle .circle {
display: block;
position: absolute;
width: 30%;
height: 30%;
margin: -14%;
border-radius: 50%;
top: 50%;
left: 50%;
}
body #parent-circle .circle.blue {
background-color: #416ba9;
transform: translate(10vw);
}
body #parent-circle .circle.pink {
background-color: #e6427a;
transform: rotate(90deg) translate(10vw) rotate(-90deg);
width: 50%;
height: 50%;
margin: -27%;
}
body #parent-circle .circle.lime {
background-color: #cddb00;
transform: rotate(180deg) translate(10vw) rotate(-180deg);
}
body #parent-circle .circle.orange {
background-color: #e0592a;
transform: rotate(270deg) translate(10vw) rotate(-270deg);
}
.content {
margin-left: 20%;
}
@keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
Desired Output