How to make a position absolute css animation responsive?

up vote
0
down vote

favorite

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

edited Nov 21 at 15:38

asked Nov 21 at 14:30

cmdReligion

New contributor

css media queries.
– Stender
Nov 21 at 14:36

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 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 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 at 15:14

1

@Ypoulakas The circles are 100px diffrent in size each. So 50px diffrent in the Top: (height of absolute)
– cmdReligion
Nov 21 at 15:40

|
show 1 more comment

up vote
0
down vote

favorite

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

edited Nov 21 at 15:38

asked Nov 21 at 14:30

cmdReligion

New contributor

css media queries.
– Stender
Nov 21 at 14:36

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 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 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 at 15:14

1

@Ypoulakas The circles are 100px diffrent in size each. So 50px diffrent in the Top: (height of absolute)
– cmdReligion
Nov 21 at 15:40

|
show 1 more comment

up vote
0
down vote

favorite

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

edited Nov 21 at 15:38

asked Nov 21 at 14:30

cmdReligion

New contributor

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

#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>

#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>

css responsive-design css-position responsive absolute

edited Nov 21 at 15:38

asked Nov 21 at 14:30

cmdReligion

New contributor

edited Nov 21 at 15:38

asked Nov 21 at 14:30

cmdReligion

New contributor

edited Nov 21 at 15:38

asked Nov 21 at 14:30

cmdReligion

New contributor

asked Nov 21 at 14:30

cmdReligion

asked Nov 21 at 14:30

cmdReligion

New contributor

cmdReligion is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

css media queries.
– Stender
Nov 21 at 14:36

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 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 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 at 15:14

1

@Ypoulakas The circles are 100px diffrent in size each. So 50px diffrent in the Top: (height of absolute)
– cmdReligion
Nov 21 at 15:40

|
show 1 more comment

css media queries.
– Stender
Nov 21 at 14:36

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 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 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 at 15:14

1

@Ypoulakas The circles are 100px diffrent in size each. So 50px diffrent in the Top: (height of absolute)
– cmdReligion
Nov 21 at 15:40

css media queries.
– Stender
Nov 21 at 14:36

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 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 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 at 15:14

@Ypoulakas The circles are 100px diffrent in size each. So 50px diffrent in the Top: (height of absolute)
– cmdReligion
Nov 21 at 15:40

|
show 1 more comment

2 Answers
2

active

oldest

votes

up vote
0
down vote

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>

answered Nov 21 at 16:23

Ypoulakas

565

This animation is tripping me out.
– Stender
Nov 22 at 8:29

add a comment |

up vote
0
down vote

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 at 14:51

cmdReligion

New contributor

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

cmdReligion is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414324%2fhow-to-make-a-position-absolute-css-animation-responsive%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

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.

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>

answered Nov 21 at 16:23

Ypoulakas

565

This animation is tripping me out.
– Stender
Nov 22 at 8:29

add a comment |

up vote
0
down vote

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.

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>

answered Nov 21 at 16:23

Ypoulakas

565

This animation is tripping me out.
– Stender
Nov 22 at 8:29

add a comment |

up vote
0
down vote

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.

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>

answered Nov 21 at 16:23

Ypoulakas

565

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.

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>

.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>

.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>

answered Nov 21 at 16:23

Ypoulakas

565

answered Nov 21 at 16:23

Ypoulakas

565

answered Nov 21 at 16:23

Ypoulakas

565

answered Nov 21 at 16:23

Ypoulakas

565

This animation is tripping me out.
– Stender
Nov 22 at 8:29

add a comment |

This animation is tripping me out.
– Stender
Nov 22 at 8:29

This animation is tripping me out.
– Stender
Nov 22 at 8:29

add a comment |

up vote
0
down vote

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 at 14:51

cmdReligion

New contributor

add a comment |

up vote
0
down vote

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 at 14:51

cmdReligion

New contributor

add a comment |

up vote
0
down vote

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 at 14:51

cmdReligion

New contributor

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 at 14:51

cmdReligion

New contributor

answered Nov 22 at 14:51

cmdReligion

New contributor

answered Nov 22 at 14:51

cmdReligion

answered Nov 22 at 14:51

cmdReligion

New contributor

cmdReligion is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

cmdReligion is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

cmdReligion is a new contributor. Be nice, and check out our Code of Conduct.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl