I found myself continuously revolving four images along a circular border, each time revealing the corresponding content. However, I only required the content from one of the images at a time

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);
    }
  } 

I managed to achieve this output, but the circle kept rotating continuously. My goal is to have it stop at a specific point each time and display its content..

Desired Output

This is the desired output that I aim for

Answer №1

I've successfully resolved one of your issues and provided you with the roadmap to tackle the rest.

Your keyframes have been adjusted to create the desired flow.

This should offer you a clearer understanding of how to make use of keyframes effectively.

Best of luck!

Edit: Because of the dynamic width/height of your circles, be sure to view the snippet in full page mode.

I would recommend setting fixed dimensions for the circles (e.g., 200px x 200px) rather than using vw.

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 {
    0% {
      -webkit-transform: rotate(0deg);
    }
    12.5% {
      -webkit-transform: rotate(90deg);
    }
    25% {
      -webkit-transform: rotate(90deg);
    }
    37.5% {
      -webkit-transform: rotate(180deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
    }
    62.5% {
      -webkit-transform: rotate(270deg);
    }
    75% {
      -webkit-transform: rotate(270deg);
    }
    87.5% {
      -webkit-transform: rotate(360deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
    
  }
<!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="b8dad7d7cccbcccad9c8f88d9689968b">[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="4c2e2323383f383e2d3c61252f23223f0c7d6275627d">[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="adcfc2c2d9ded9dfccdded98839c839e">[email protected]</a>>/dist/js/bootstrap.bundle.min.js "></ script>
</ head>
< body>
    < div id = "parent-circle " >
        < div class = "circle blue "> & lt; </div>
        < div class = "circle pink "> & lt; </div>
        < div class = "circle lime "> & lt; </div>
        < div class = "circle orange "> & lt; </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> 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to delete a specific class from a WordPress page

Currently working on customizing a WordPress theme that incorporates Bootstrap as its framework. The header has been styled with a sticky effect using the .fixed-top class. However, I now have the requirement to remove this class on certain pages based on ...

Creating an SQL select statement with a three-level expression is a complex task that requires careful planning and

How can I create a SQL select query with 3 levels of expressions and statements? Typically, my website operates on an SQLite database and the search results are displayed using the following SQL query: "SELECT DISTINCT * FROM amz WHERE Title LIKE \" ...

I am struggling to get the images aligned properly on my HTML page. Can someone please advise on how to fix this issue?

On my HTML page, I have 2 div fields. Within each field, there are 5 images listed sideways. The issue is that the images in the div below are not lining up properly side by side. Given my limited frontend knowledge, how can I align them correctly? Here&a ...

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

Using the <li dir="..."> tag can cause list indicators to break

Is there a method to utilize dir tags for <li> elements without disrupting the list indicators? Logically, they should all align on the same side and RTL <li> elements in an otherwise LTR document should either be left-aligned if it's only ...

What are the advantages of using clearfix for clearing floats in CSS?

Recently, I encountered an issue with using clearfix to clear the floating effect in CSS. Someone mentioned that it may not be the best technique and suggested using alternative methods. Is this information accurate? If so, what are some other options tha ...

What is the best way to resize an image in HTML based on a percentage of its height?

Within my HTML code, I have a PNG image that has been adjusted in size using CSS: .adjust-image { border:1px solid #021a40; display: block; width: auto; max-width: 100%; max-height: 1000px; } .img-container { position: relative; } ...

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Currently, I am facing an issue with a jQuery event that triggers a text-shadow effect: $(".leftColumn").hover(function (){ $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)"); },function(){}); The problem arises when the text-shad ...

Create a division element with an image that can be dragged around

I'm having trouble making a div element draggable. Inside the div, there is an img and some text that acts as a label for the image. The issue is that when I begin dragging by clicking on the img, it's the img that gets dragged instead of the par ...

Having trouble centering elements correctly with Bootstrap 5

Just dipping my toes into the world of bootstrap and experimenting with some code. Encountered an issue when trying to center elements properly within columns: <div class="container"> <div class="row"> <div class= ...

Implementing a tooltip popup inside the header cell of the ordering table

Apologies in advance for my lack of experience with coding more complex website features. I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users. While I have all the necessary component ...

Angucomplete-alt fails to display dropdown menu

On my website, there is a textarea where users need to input the name of a group project. The goal is to implement autocomplete functionality, so as users type in the project name, a dropdown menu will appear with suggestions of existing projects to assist ...

What is the best way to adjust the height of a div based on its child content

I've been experimenting with various methods to extend the white background around the title to cover the rest of the content. I've tried using overflow, clear, min-height, max-height, and even the '*' selector but nothing seems to work ...

What is the best way to align a scalable SVG image in the center?

My goal is to horizontally align this SVG within its container, which could be any div, body, or other element. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> &l ...

Making Bootstrap div stretch vertically with absolutely positioned content

Is there a way to make the middle div expand vertically on screen sizes smaller than 1000px without causing the text to flow under the image in the third div? Even clearing floats doesn't seem to solve the issue. This code is based on Bootstrap 4.4. ...

Tips for maintaining a website within a 960px width while stretching the background on the x-axis

I have enclosed the entire website within a div with the ID container. The CSS styling for the container is as follows: #container { width: 960px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } How ...

Incorporating information into Observable in Angular 2

I'm currently working on loading gifs from the API based on a search parameter in batches of 20. Once I reach the bottom of the page, I need to load another 20. To achieve this, I've implemented observables. However, I'm facing an issue with ...

Chrome has a tendency to cut off page contents in print preview, unlike other browsers that do not have this issue

My current version of Chrome browser (54.0.2840.59) is exhibiting a strange behavior when attempting to print preview an HTML page I have developed. The print preview truncates the page content, displaying less than what should be shown. The content is not ...

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

What is the best way to set the active class on the initial tab that is determined dynamically rather than a static tab in Angular?

I'm currently facing a problem with ui-bootstrap's tabsets. I have one tab that is static (Other) and the rest are dynamically added using ng-repeat. The issue I'm having is that I can't seem to make the first dynamically loaded tab act ...