CSS animacja - czy da się uzyskać tu płynny ruch?

Question

Witam,

 

Zainspirowany przykładem chciałem zrobić animacje w CSS, gdzie kwadrat obraca się po kole w specyficzny sposób.

 

1. Założenia:

Używam   transform-origin: 50% 0%; aby kwadrat obracał się tylko według punktu 'po środku górnej krawędzi kwadratu'.

Do wyznaczania ruchu i obrotu używam:  transform: translate(100px, -100px) rotate(-90deg);

Keyframes podzieliłem na 5 kroków: 0% , 25%  , 50%   , 75%  , 100% . 5 punktów, gdzie ma się znaleźć kwadrat w trackie ruchu.

 

 

1. Problem:

Kod działa, ale:  ruch kwardatu nie jest płynny. Widać jak po dojściu do , np. 25% kwadrat przez chwile się zatrzymuje, potem wznawia ruch. Czy istnieje sposób by uzyskać płynność ruchu, tak by w 1 tempie poruszał się kwadrat w animacji? Nie przychodzi mi żaden pomysł do głowy.

 

Tutaj daje cały kod  codepen-animacja-css

 

Dodatkowo kod html

 <div class="wrapper">
    <div class="a"></div>
    <!--    g1 wyznacza odleglosc -->
    <div class="g1"></div> 
  </div>

Kod CSS

  * {
      box-sizing: content-box;
      margin: 0px;
      padding: 0px;
    }

    .wrapper {
      position: relative;
      height: 100vh;
      width: 100%;
    }

    .a {
      position: absolute;
      top: 43%;
      left: 47%;
      height: 110px;
      width: 110px;
      background: lightblue;

      animation: spin 8s linear infinite;
      /* animation: spin 8s linear both; */
      transform-origin: 50% 0%;
    }

    @keyframes spin {
      0% {
        transform: translate(0px, 0px) rotate(0deg);
      }

      25% {
        transform: translate(100px, -100px) rotate(-90deg);
      }

      50% {
        transform: translate(0px, -200px) rotate(-180deg);
      }

      75% {
        transform: translate(-100px, -100px) rotate(-270deg);
      }

      100% {
        transform: translate(0px, 0px) rotate(-360deg);
      }
    }

    .g1 {
      position: absolute;
      top: 236px;
      left: 762px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      height: 115px;
      width: 115px;
      background: red;
    }

 

Z góry dziękuję za sugestie.

Comments

Hm, możesz pokazać na filmiku problem? Bo prawdę mówiąc u siebie nie widzę, żeby się zatrzymywało.

PS potwierdź maila na CodePenie, bo fullscreen strasznie by się przydał ;)

---

@lukasz21, U mnie też działa "płynnie".

Może to Ciebie zainspiruje.    How to Move an Element in a Circular Path with CSS

Mała zmiana, żeby obejść się bez kodu js-a. (od komentuj linie - ciekawe kombinacje)

<div id="parent">
  <div id="child">
    <img src="https://usefulangle.com/img/posts/32-es6.jpg">
    <!-- <img src="https://usefulangle.com/img/posts/32-es6.jpg"> -->       
  </div>
</div>

* {
  box-sizing: content-box;
  margin: 0px;
  padding: 0px;
}

#parent {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 2px solid rgba(0,0,0,0.2);
  /* border: 1px solid rgba(0,0,0,0); */
  /* border: 4px dotted rgba(0,0,0,0.2); */
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 0.7s linear;
  animation: spin 8s linear infinite;
  top: 25%;
  left: 25%;
}
#child {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: rotate(0deg);
  transition: transform 0.7s linear;
  top: -40px;
  left: 110px;
  animation: spin 4s linear infinite;
}

#child img {
  max-width: 100%;
  /* border-radius: 10%; */
  border-radius: 50%;
}

/*
#child img:nth-child(2) {
  max-width: 50%;
  // border-radius: 10%; 
  border-radius: 50%;
}
*/

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

 

---

Wielkie dzięki. To jest rozwiązanie którego potrzebowałem. Dzięki temu animacja jest płynna i  kwadrat obraca się 'płynnym' ruchem w jednym tempie.