How to make a position absolute css animation responsive?

Question

So i got this css animation with 5 of this circles rotating between some text;

(each of them is diffrent in size)

#circle .circle1{
    position: absolute;
    top: 1330px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5E0DAC;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 18s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle2{
    position: absolute;
    top: 1380px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 400px;
    width: 400px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #B90091;
    border-right: 20px solid #B90091;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    animation-name: circle2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle3{
    position: absolute;
    top: 1480px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #5E0DAC;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}



#circle .circle4{
    position: absolute;
    top: 1430px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    display: inline-block;
    border-top: 20px solid #5E0DAC;
    border-right: 20px solid #5E0DAC;
    border-bottom: 20px solid transparent;
    border-left: 20px solid transparent;
    animation-name: circle1;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
}

#circle .circle5{
    position: absolute;
    top: 1530px;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: inline-block;
    background-color: #B90091;
}


@keyframes circle2{
    0% {transform: rotate(-360deg)}
}


@keyframes circle1{
    0% {transform: rotate(360deg)}
}

<html>
    <div id="circle">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
            <div class="circle5"></div>
          </div> 

</html>

What would be the easiest way to make this animation responsive? i would have to edit every pixel for the height and width in the media queries for that.

Asking if there is a easier way.

Cheers

For sure, but I would have to go px for px for every screen height and width. My question was if there maybe is an easy go-around of this. — cmdReligion, Nov 21 '18 at 15:03
What is the relation between the size of each of the circles and the text they are rotating round? For example is circle 1 always twice the size of the text? — ypoulakas, Nov 21 '18 at 15:11
Hi, could you include everything in the snippet editor so that we can reproduce what you see exactly? It would be the `<>` button on the text editor when you're editing the question. — Chris W., Nov 21 '18 at 15:14
@Ypoulakas The circles are 100px diffrent in size each. So 50px diffrent in the Top: (height of absolute) — cmdReligion, Nov 21 '18 at 15:40

score 0 · Answer 1 · answered Nov 21 '18 at 16:23

This might not be a full answer to your problem as its not 100% responsive but its a starting point to make it easier with the media queries.

The code is more classed based, so for example each ring has a purple or a pink class to get its color, and all the common elements between the circles are now in a single class.

The differences, such as animation timing and position are now against the individual ids for each ring and more importantly the rings are based on percentages relative to each other. The outer ring which I took as 100% at 500px was used as the basis, and the positional elements were taken relative to that.

I added a new container div to hold and position the circle animation as you see fit. It will attempt to push itself out to fit the dimensions of that space, so you can adjust its height and width in media queries as you need to. You can also adjust things like the border width in the media queries to make it look more relative to the overall size.

To be honest if I was to tackle an animation like this from scratch I would look at an SVG based solution.

.circleHolder {
  height: 540px; /* main ring is 500px + the 40px (for the border @20px) */
  width: 540px; /*     border-width:20px; /* media queries should target this value and the height */
  top: 200px; 
  left: 200px;
  position:absolute;
}

#circle {
  height: 100%;
  width: 100%;
  position:relative;

}

.circle {
    border-radius: 50%;
    display: inline-block;
    margin: 0 auto;
    text-align:center;
    animation-iteration-count: infinite;
    animation-delay: -1s;
    animation-timing-function: linear;
    position:absolute;
    border-style: solid;
    border-width:20px; /* media queries should target this value */ 

}


.purpleCircle {

        border-top-color: #5E0DAC;
        border-right-color: transparent;
        border-bottom-color: #5E0DAC;
        border-left-color: transparent;  

}

.pinkCircle {
    border-top-color: #B90091;
    border-right-color: #B90091;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.circle1{ 
    height: 100%;
    width: 100%;  
    animation-name: circle1;
    animation-duration: 18s;
}

.circle2{
    
    top:  10%;
    left: 10%;
    height: 80%;
    width: 80%;  
    animation-name: circle2;
    animation-duration: 8s;
}

.circle3{
    top: 30%;
    left: 30%;
    height: 40%;
    width: 40%;  
    animation-name: circle1;
    animation-duration: 6s;
}

.circle4{
    top: 20%;
    left: 20%;
    height: 60%;
    width: 60%;
    animation-name: circle1;
    animation-duration: 13s;
}

.circle5{
    top: 40%;
    left: 40%;
    height: 20%;
    width: 20%;    
    background-color: #B90091;
}


@keyframes circle2{
    0% {transform: rotate(-360deg)}
}


@keyframes circle1{
    0% {transform: rotate(360deg)}
}

    <html>
      <div class="circleHolder">
        <div id="circle">
                <div class="circle circle1 purpleCircle"></div>
                <div class="circle circle2 pinkCircle"></div>
                <div class="circle circle3 purpleCircle"></div>
                <div class="circle circle4 purpleCircle"></div>
                <div class="circle circle5 pinkCircle"></div>
              </div> 
      </div>
    </html>

This animation is tripping me out. – Stender Nov 22 '18 at 08:29 — Stender, Nov 22 '18 at 08:29

score 0 · Answer 2 · answered Nov 22 '18 at 14:51

0

Thanks for the help, this really helped me!

So I figured it out, I just had to give the parent element #circle a position: relative; atribute and so I just have to align this one element.

#circle{
position: relative;
bottom: 750px;

answered Nov 22 '18 at 14:51

cmdReligion

65
8

How to make a position absolute css animation responsive?

2 Answers2

Linked