How to stop text to spin right animation?

Question

I have the following animation which is infinite. I am trying to create rollover with a spin right animation but you see in the JSFiddle a circle turn right but I wish that the text did not turn and that it remains in the center of the circle.

/* contient l'orbit le tout */

#circle-orbit-container {
  position: relative;
  bottom: 100px;
  left: 43%;
  height: 300px;
  width: 300px;
}


/* ---------- 1er cercle orbit  ---------- */

#orbit1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 1er orbit   ---------- */

.inner-orbit-cirlces {
  position: absolute;
  top: -293px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #9F98E6;
}


/* ----------2eme cercle orbit  ---------- */

#orbit2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 2 orbit  ---------- */

.outer-orbit-cirlces {
  position: absolute;
  top: 0px;
  left: 390px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #00FFCA;
}


/* ---------- 3e cercle orbit ---------- */

#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 3 orbit  ---------- */

.orbit4 {
  position: absolute;
  top: 390px;
  left: 100px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #000;
}

#cercle4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 4e  orbit   ---------- */

.middle-orbit-cirlces {
  position: absolute;
  top: 76px;
  left: -300px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #4A437F;
}


/* ----------  orbit centre  ---------- */

.orbit5 {
  position: absolute;
  top: 70px;
  left: 70px;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background-color: #3C3C3C;
}


/* ---------- Animation ---------- */

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.inner-orbit-cirlces .caption,
.inner-orbit-cirlces .content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
}

.inner-orbit-cirlces:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}

.inner-orbit-cirlces h5 {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  font-size: 1.2em;
  padding-bottom: 10px;
  margin: 7%;
  opacity: 0;
  border-bottom: 1px solid white;
  -webkit-transition: all 0.4s ease-in 0.2s;
  spin-right: none !important;
}

.inner-orbit-cirlces:hover h5 {
  -webkit-transition-delay: 0.2s ease-in 0.2s;
  opacity: 1;
}

.inner-orbit-cirlces p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 0 7%;
  opacity: 0;
  -webkit-transition: all 0.8s ease-in 0.2s;
}

.inner-orbit-cirlces:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.5s ease-in 0.2s;
}

<div id="circle-orbit-container">

  <!-- Circles closest to the central point -->
  <div id="orbit1">

    <div class="inner-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption1">

          <p class="text-justify">ook let's gggggo </p>
          <p class="h5">Feel Natural</p>
        </div>


    </div>
  </div>

  <!-- Circles second closest to the central point -->
  <div id="orbit2">




    <div class="middle-orbit-cirlces">

      <a href="#">
        <img src="" />
        <div class="caption2">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>


    </div>
  </div>

  <!-- Circles furthest away to the central point -->
  <div id="outer-orbit">


    <div class="outer-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption3">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>


    </div>
  </div>


  <div id="cercle4">


    <div class="orbit4">

      <a href="#">
        <img src="" />
        <div class="caption4">
          <h5>Feel natural</h5>
          <p> ook let's go </p>
        </div>

    </div>
  </div>

  <div id="cercle5">


    <div class="orbit5"></div>
  </div>

</div>

https://codepen.io/corentin-da-silva/pen/RzzgVX – corentin da silva Jul 15 '19 at 14:38 — corentin da silva, Jul 15 '19 at 14:38

score 1 · Accepted Answer · answered Jul 15 '19 at 18:03

Simple reverse the same animation you're currently using for your rotation like so;

Though you may want to fix your box model a bit to keep the text block centered in the circles. Cheers!

/* contient l'orbit le tout */

#circle-orbit-container {
  position: relative;
  bottom: 100px;
  left: 43%;
  height: 300px;
  width: 300px;
}


/* ---------- 1er cercle orbit  ---------- */

#orbit1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 1er orbit   ---------- */

.inner-orbit-cirlces {
  position: absolute;
  top: -293px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #9F98E6;
}


/* ----------2eme cercle orbit  ---------- */

#orbit2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}


/* ---------- 2 orbit  ---------- */

.outer-orbit-cirlces {
  position: absolute;
  top: 0px;
  left: 390px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #00FFCA;
}


/* ---------- 3e cercle orbit ---------- */

#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 3 orbit  ---------- */

.orbit4 {
  position: absolute;
  top: 390px;
  left: 100px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #000;
}

#cercle4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 4e  orbit   ---------- */

.middle-orbit-cirlces {
  position: absolute;
  top: 76px;
  left: -300px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #4A437F;
}


/* ----------  orbit centre  ---------- */

.orbit5 {
  position: absolute;
  top: 70px;
  left: 70px;
  height: 150px;
  width: 150px;
  border-radius: 100%;
  background-color: #3C3C3C;
}


/* ---------- Animation ---------- */

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.inner-orbit-cirlces .caption,
.inner-orbit-cirlces .content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
}

.inner-orbit-cirlces:hover .caption {
  opacity: 1;
  transition-delay: 0s;
}

.inner-orbit-cirlces h5 {
  text-transform: uppercase;
  color: #fff;
  position: relative;
  font-size: 1.2em;
  padding-bottom: 10px;
  margin: 7%;
  opacity: 0;
  border-bottom: 1px solid white;
  -webkit-transition: all 0.4s ease-in 0.2s;
  spin-right: none !important;
}

.inner-orbit-cirlces:hover h5 {
  -webkit-transition-delay: 0.2s ease-in 0.2s;
  opacity: 1;
}

.inner-orbit-cirlces p {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #fff;
  padding: 0 7%;
  opacity: 0;
  -webkit-transition: all 0.8s ease-in 0.2s;
}

.inner-orbit-cirlces:hover p {
  opacity: 1;
  -webkit-transition-delay: 0.5s ease-in 0.2s;
}

.caption1, .caption2, .caption3, .caption4 {
  color: red;
  animation: spin-right 20s linear infinite reverse; 
}

<div id="circle-orbit-container">

  <!-- Circles closest to the central point -->
  <div id="orbit1">
    <div class="inner-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption1">
          <p class="text-justify">ook let's gggggo </p>
          <p class="h5">Feel Natural</p>
        </div>
    </div>
  </div>

  <!-- Circles second closest to the central point -->
  <div id="orbit2">
    <div class="middle-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption2">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>
    </div>
  </div>

  <!-- Circles furthest away to the central point -->
  <div id="outer-orbit">
    <div class="outer-orbit-cirlces">
      <a href="#">
        <img src="" />
        <div class="caption3">
          <h5>Feel natural></h5>
          <p> ook let's go </p>
        </div>
    </div>
  </div>

  <div id="cercle4">
    <div class="orbit4">
      <a href="#">
        <img src="" />
        <div class="caption4">
          <h5>Feel natural</h5>
          <p> ook let's go </p>
        </div>
     </div>
  </div>

  <div id="cercle5">
    <div class="orbit5"></div>
  </div>

</div>

Thank for a solution ! you saved me ! – corentin da silva Jul 15 '19 at 18:37 — corentin da silva, Jul 15 '19 at 18:37

score 0 · Answer 2 · answered Jul 15 '19 at 15:44

Making anything center between any div have two ways

1. Absolute Positioning (Traditional way )

position:absolute; 
top:50%;
left:50%;
transform:translate(-50%,-50%)

In this technique we assign above values to div which you want to center. Note Use position:relative on parent child else it will consider viewport as parent and center itself in viewport;

Flexbox (Mordern way )

  display:flex;
  align-items:center;
  justify-content:center;

In technique we assign above values to parent div and it make center everything.

/* contient l'orbit le tout */
#circle-orbit-container {
  position: relative;
  bottom: 100px;
  left: 43%;
  height: 300px;
  width: 300px;
}









/* ---------- 1er cercle orbit  ---------- */
#orbit1 {
position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;

  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
}






/* ---------- 1er orbit   ---------- */
.inner-orbit-cirlces {
  position: absolute;
  top: -293px;
  left: 0px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #9F98E6;
    

}





/* ----------2eme cercle orbit  ---------- */
#orbit2 {
position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;

  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;

}




/* ---------- 2 orbit  ---------- */
.outer-orbit-cirlces {
  position: absolute;
  top: 0px;
  left: 390px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #00FFCA;
}








/* ---------- 3e cercle orbit ---------- */
#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}


/* ---------- 3 orbit  ---------- */
.orbit4 {
  position: absolute;
  top: 390px;
  left: 100px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #000;
}




#cercle4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;

  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}



/* ---------- 4e  orbit   ---------- */
.middle-orbit-cirlces {
  position: absolute;
  top: 76px;
  left: -300px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #4A437F;

}



/* ----------  orbit centre  ---------- */
.orbit5 {
  position: absolute;
  top:70px;
  left:70px;

  height: 150px;
  width: 150px;
  border-radius: 100%;
  background-color: #3C3C3C;
  
}


/* ---------- Animation ---------- */
@-webkit-keyframes spin-right  {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




.inner-orbit-cirlces .caption, .inner-orbit-cirlces .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.7);
    opacity:0;
    -webkit-transition: all 0.2s ease-in-out;
}
.inner-orbit-cirlces:hover .caption {
    opacity:1; 
    transition-delay: 0s;
}

.inner-orbit-cirlces h5 {
    text-transform: uppercase;
    color: #fff;
    position: relative;
    font-size: 1.2em;
    padding-bottom:10px;
    margin:7%;
    opacity:0;
    border-bottom:1px solid white;
    -webkit-transition: all 0.4s ease-in 0.2s;
   spin-right:none !important;
}
.inner-orbit-cirlces:hover h5 {  
  -webkit-transition-delay: 0.2s ease-in 0.2s;
  opacity:1;
}


.inner-orbit-cirlces p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 0 7%;
    opacity:0;
    -webkit-transition: all 0.8s ease-in 0.2s;
}

.inner-orbit-cirlces:hover p {
    opacity:1;
    -webkit-transition-delay: 0.5s ease-in 0.2s;
}

.center{
  text-align:center;
  /*Morder way*/
  display:flex;
  align-items:center;
  justify-content:center;
}

<div id="circle-orbit-container">

  <!-- Circles closest to the central point -->
  <div id="orbit1">
    <div class="inner-orbit-cirlces center">
       <a href="#">
       <img src="" />  
       <div class="caption1">  
       <p class="text-justify">ook let's gggggo           </p>  
       <p class="h5">Feel Natural</p>
     </div>
    </div>
</div>

  <!-- Circles second closest to the central point -->
  <div id="orbit2">
      
      
      
      
    <div class="middle-orbit-cirlces center">
        
          <a href="#">
     <img src="" />  
     <div class="caption2">  
       <h5>Feel natural></h5>  
       <p> ook let's go </p>    
     </div>  
        
        
    </div>
  </div>

  <!-- Circles furthest away to the central point -->
  <div id="outer-orbit">
 
    <div class="outer-orbit-cirlces center">
          <a href="#">
     <img src="" />  
     <div class="caption3">  
       <h5>Feel natural></h5>  
       <p> ook let's go </p>    
     </div>  
        
        
    </div>
  </div>
  
  
  <div id="cercle4">
      
      
    <div class="orbit4 center">
        
          <a href="#">
     <img src="" />  
     <div class="caption4">  
       <h5>Feel natural</h5>  
       <p> ook let's go </p>    
     </div>  
        
    </div>
  </div>
  
  <div id="cercle5">
      
      
    <div class="orbit5"></div>
  </div>

</div>

Thank you, but i think you don't understand my question.I want that the text don't move or turn and stay horizontal even if the circle which is in turn. — corentin da silva, Jul 15 '19 at 16:32
You need to make text constant , they should not move along with orbits , right? — midnightgamer, Jul 15 '19 at 16:43
Yes absolutely, you understand me, it right the text make stay constant compared orbits — corentin da silva, Jul 15 '19 at 17:02

How to stop text to spin right animation?

2 Answers2