Move smoothly around an object in CSS

Question

I have two images moving around a DOM element. But their rotation is wrong, and the movement is not smooth.

My violin

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.bicycle {
  width: 48px;
  height: 30px;
  background: red;
}

#bicycleOriginal {
  animation: moveBicycleOriginal 20s infinite;
}

#bicycleFlipped {
  animation: moveBicycleFlipped 20s infinite;
}

#mainTxt {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0);
  }
  1% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(350px, 0);
  }
  26% {
    transform: translate(350px, 0) rotate(90deg);
  }
  50% {
    transform: translate(350px, 150px);
  }
  51% {
    transform: translate(350px, 150px) rotate(180deg);
  }
  75% {
    transform: translate(0, 150px);
  }
  76% {
    transform: translate(0, 150px) rotate(270deg);
  }
  to {
    transform: translate(0, 0);
  }
}

@keyframes moveBicycleFlipped {
  from {
    transform: translate(350px, 0);
  }
  1% {
    transform: translate(350px, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 0);
  }
  26% {
    transform: translate(0, 0) rotate(90deg);
  }
  50% {
    transform: translate(0, -150px);
  }
  51% {
    transform: translate(0, -150px) rotate(180deg);
  }
  75% {
    transform: translate(350px, -150px);
  }
  76% {
    transform: translate(350px, -150px) rotate(270deg);
  }
  to {
    transform: translate(350px, 0);
  }
}

<div id="mainPage">
  <div class="bicycle" id="bicycleOriginal"></div>

  <p class="txt" id="mainTxt">DRAHTESEL</p>

  <div class="bicycle" id="bicycleFlipped"></div>
</div>

Run codeHide result

So I want something like this

After passing the first key frame, the boxes fall into the wrong rotation. In addition, they do not move smoothly, faster and faster, reaching the end.

Can someone help me with keyframes?

Answer 1

You should always keep the rotation defined within the transformation, because each transformation will cancel the previous one and remove the rotation means rotate(0).

, , . 360deg , 0deg. ( , ).

animation-timing-function , .

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.bicycle {
  width: 48px;
  height: 30px;
  background: red;
}

#bicycleOriginal {
  animation: moveBicycleOriginal 20s infinite;
}

#bicycleFlipped {
  animation: moveBicycleFlipped 20s infinite;
}

#mainTxt {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(350px, 0) rotate(0deg);
  }
  26% {
    transform: translate(350px, 0) rotate(90deg);
  }
  50% {
    transform: translate(350px, 150px) rotate(90deg);
  }
  51% {
    transform: translate(350px, 150px) rotate(180deg);
  }
  75% {
    transform: translate(0, 150px) rotate(180deg);
  }
  76% {
    transform: translate(0, 150px) rotate(270deg);
  }
  98% {
    transform: translate(0, 0) rotate(270deg);
  }
  to {
    transform: translate(0, 0) rotate(360deg);
  }
}

@keyframes moveBicycleFlipped {
  from {
    transform: translate(350px, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 0) rotate(0deg);
  }
  26% {
    transform: translate(0, 0) rotate(90deg);
  }
  50% {
    transform: translate(0, -150px) rotate(90deg);
  }
  51% {
    transform: translate(0, -150px) rotate(180deg);
  }
  75% {
    transform: translate(350px, -150px) rotate(180deg);
  }
  76% {
    transform: translate(350px, -150px) rotate(270deg);
  }
  97% {
    transform: translate(350px, 0) rotate(270deg);
  }
  to {
    transform: translate(350px, 0) rotate(360deg);
  }
}

<div id="mainPage">
  <div class="bicycle" id="bicycleOriginal"></div>

  <p class="txt" id="mainTxt">DRAHTESEL</p>

  <div class="bicycle" id="bicycleFlipped"></div>
</div>

Hide result

Answer 2

/ - Timing ( ), "".

, , . , css transform. transform.

#example{
    transform: rotate(10deg)
}
#example.changed{
    transform: translateX(100px);
}

, changed, , rotate translateX. , :

#example.changed{
    transform: rotate(10deg) translateX(100px);
}

Answer 3

Temani Afif .

I set the extra transform applied after the rotation. This makes the rotation smooth in the sense that the object rotates along a path rather than in the same place.

I set the synchronization to linear, as suggested by Martijn

I simplified it to use one keyframe rule by setting a delay on an inverted div.

And he made a longer cut of time for long sides and another store, so that the perceived speed was more constant

Result:

#mainPage {
  width: 400px;
  height: 165px;
  margin: 10% auto;
}

#mainPage>p {
  text-align: center;
}

.bicycle {
  width: 48px;
  height: 30px;
  background: red;
}

#bicycleOriginal {
  animation: moveBicycleOriginal 20s infinite linear;
}

#bicycleFlipped {
  position: relative;
  top: -120px;
  animation: moveBicycleOriginal 20s -10s infinite linear;
}

#mainTxt {
  letter-spacing: 7px;
  font-size: 30px;
  margin-bottom: 30px;
}

@keyframes moveBicycleOriginal {
  from {
    transform: translate(0, 0) rotate(0deg) translate(0, -50px);
  }
  26% {
    transform: translate(350px, 0) rotate(0deg) translate(0, -50px);
  }
  30% {
    transform: translate(350px, 0) rotate(90deg)  translate(0, -50px);
  }
  46% {
    transform: translate(350px, 150px) rotate(90deg) translate(0, -50px);
  }
  50% {
    transform: translate(350px, 150px) rotate(180deg)  translate(0, -50px);
  }
  76% {
    transform: translate(0, 150px) rotate(180deg)  translate(0, -50px);
  }
  80% {
    transform: translate(0, 150px) rotate(270deg)  translate(0, -50px);
  }
  96% {
    transform: translate(0, 0) rotate(270deg)  translate(0, -50px);
  }
  to {
    transform: translate(0, 0) rotate(360deg)  translate(0, -50px);
  }
}

<div id="mainPage">
  <div class="bicycle" id="bicycleOriginal"></div>

  <p class="txt" id="mainTxt">DRAHTESEL</p>

  <div class="bicycle" id="bicycleFlipped"></div>
</div>

Run codeHide result