CSS Animated Circles - Stop Center Content from Rotating

var radius = 100; // adjust to move out items in and out var fields = $('.item'),  container = $('#container'),  width = container.width(),  height = container.height();var angle = 0,  step = (2 * Math.PI) / fields.length;fields.each(function() {  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);  if (window.console) {    console.log($(this).text(), x, y);  }  $(this).css({    left: x + 'px',    top: y + 'px'  });  angle += step;});

body {  padding: 2em;}#container {  width: 200px;  height: 200px;  margin: 10px auto;  border: 1px solid #000;  position: relative;  border-radius: 50%;  animation: spin 10s linear infinite;}.item {  width: 30px;  height: 30px;  line-height: 30px;  text-align: center;  border-radius: 50%;  position: absolute;  background: #f00;  animation: spin 10s linear infinite reverse;}@keyframes spin {  100% {    transform: rotate(1turn);  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div></div>

CSS rotate animation of HTML circle text, transform-origin doesn't work

Giving height to the parent of your absolute positioned children, this what you are looking for?

.rotText{
  min-width: 80vw;
  margin: 5vh auto;
  text-align: center;
  position: relative;
}
#test{
  font-weight: 900;
  color: #394add;
  font-size: 20px;
  display: inline-block;
  margin-bottom: 128px;
  position: relative;
  z-index: 10;
  transform: scale(1);
  transform-origin: center center;
  animation: rotation 5s linear infinite;
  height: calc(330px + 2rem);.
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

<div class="rotText">
<img src="05-img/Thinking man.png" alt="Sample Image">
  <div class="curved-text" id="test">
    <p style="height:165px; position:absolute; transform:rotate(0deg);
    transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(8.78048780487805deg);
    transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(17.5609756097561deg);
    transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(26.34146341463415deg);
    transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(35.1219512195122deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(43.90243902439025deg);
    transform-origin:0 100%">g</p><p style="height:165px; position:absolute; transform:rotate(52.6829268292683deg);
    transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(61.463414634146346deg);
    transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(70.2439024390244deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(79.02439024390245deg);
    transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(87.8048780487805deg);
    transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(96.58536585365854deg);
    transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(105.3658536585366deg);
    transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(114.14634146341464deg);
    transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(122.92682926829269deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(131.70731707317074deg);
    transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(140.4878048780488deg);
    transform-origin:0 100%">v</p><p style="height:165px; position:absolute; transform:rotate(149.26829268292684deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(158.0487804878049deg);
    transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(166.82926829268294deg);
    transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(175.609756097561deg);
    transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(184.39024390243904deg);
    transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(193.1707317073171deg);
    transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(201.95121951219514deg);
    transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(210.7317073170732deg);
    transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(219.51219512195124deg);
    transform-origin:0 100%">m</p><p style="height:165px; position:absolute; transform:rotate(228.2926829268293deg);
    transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(237.07317073170734deg);
    transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(245.85365853658539deg);
    transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(254.63414634146343deg);
    transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(263.4146341463415deg);
    transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(272.19512195121956deg);
    transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(280.9756097560976deg);
    transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(289.7560975609756deg);
    transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(298.5365853658536deg);
    transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(307.31707317073165deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(316.09756097560967deg);
    transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(324.8780487804877deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(333.6585365853657deg);
    transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(342.43902439024373deg);
    transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(351.21951219512175deg);
    transform-origin:0 100%"></p>
</div>
</div>

On hover stop animation at their respective position

You can pause animation using JQUERY as well as CSS.

A very simple solution to use animation-play-state property.
Try these lines:

    .innercircle1 {
        animation: inner-circle 5s linear infinite;
        animation-play-state: play;
    }
   .innercircle1:hover{
        animation-play-state: paused;
    }

CSS offset-path move along arc without rotating

Fixed it by replacing "after" with element with svg background. Added animation to swing back.

Using translate to flip the element and also tuck it under the main circle.
Inspiration on using translate by @laaouatni-anas

 
 $(".kolecko").on('click', function (){
            const data = $(this).data('for');

            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $('.kolecko').not(this).removeClass('non-active');
                $(this).addClass('wasActive')
                    .delay(1000)
                    .queue(function(next){
                        $(this).removeClass('wasActive');
                        next();
                    });
            }
            else if($(this).hasClass('non-active')){
                $('.kolecko').not(this)
                    .removeClass('active')
                    .addClass('non-active wasActive')
                    .delay(1000)
                    .queue(function(next){
                        $(this).removeClass('wasActive');
                        next();
                    });
                $(this).removeClass('non-active').addClass('active');

            }
            else{
                $('.kolecko').not(this).addClass('non-active');
                $(this).addClass('active');

             
            }

    });

 .kolecko{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: #001f49;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: relative;
        cursor: pointer;
 }
  .kolecko.active .ucho{
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1175 1175'%3E%3Cpath style='fill:%23ed174a' class='fil0' d='M957 1l-957 -1c65,184 101,381 101,587 0,206 -36,404 -101,587l957 1c120,0 218,-98 218,-218l0 -738c0,-120 -98,-218 -218,-218z'/%3E%3C/svg%3E");
          offset-path: path('M-75,-75 A75,75 0 0,1 -75,75');
          animation: move 1000ms ease-in-out forwards;
          transform: rotate(-90deg) translate(calc(50% - 4px),0);
  }
.kolecko.active .ucho::after{
            content: "\f137";
          }

.kolecko.wasActive .ucho{
        offset-path: path('M-75,-75 A75,75 0 0,1 -75,75');
        animation: moveback 1000ms ease-in-out forwards;
        transform: rotate(-90deg) translate(calc(50% - 4px),0);
 }
.ucho{
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1175 1175'%3E%3Cpath style='fill: %239BA1C6' class='fil0' d='M957 1l-957 -1c65,184 101,381 101,587 0,206 -36,404 -101,587l957 1c120,0 218,-98 218,-218l0 -738c0,-120 -98,-218 -218,-218z'/%3E%3C/svg%3E");
          background-repeat: no-repeat;
          width: 45px;
          height: 45px;
          background-size: 100% 100%;
          line-height: 45px;
          position: absolute;
          left: 100%;
          top: 50%;
          transform: translate(-4px,-50%);
          cursor: pointer;
}
.ucho::after{
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f138";
            font-size:25px;
}

@keyframes move {
  0% {
    offset-distance: 50%;
  }

  100% {
    offset-distance: 100%;
  }
}
@keyframes moveback {
  0% {
    offset-distance: 100%;
  }

  100% {
    offset-distance: 50%;

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">
<div class="kolecko" data-for="zalozit-klic">
                        <span class="chci">chci</span>
                        <span class="nazev-sluzby">ZALOŽIT s.r.o. NA KLÍČ</span>
                        <span class="ucho">
                    </div>

Related Topics