trouble with using transform origin on keyframe css

June 16, 2023

I have a <div class="sphere" /> that I want to move in the shape of infinity symbol. So I thought the answer should be to fix transform-origin to left, from 0 to 50%, make it do a full rotation, then change transform-origin to right, and from 50.01% to 100% make it do a full rotation again and reset tranform origin like so


.sphere {
        position: absolute;
        width: var(--sphere-dim);
        height: var(--sphere-dim);
        background: rgb(183, 162, 159);
        border-radius: 50%;
        top: 40%;
        left: 40%;
        transform-origin: left;
        /* transition: all 1.5s; */
        /* animation-fill-mode: forwards; */
        animation: infinityWobble 5s infinite;
    }

    @keyframes infinityWobble {
        0% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(360deg);
        }
        50.01% {
            transform: rotate(0deg);
            transform-origin: right;
        }
        99% {
            transform: rotate(360deg);
        }
        100% {
            transform-origin: left;
        }
    }

https://codepen.io/meherwan-singh-gill/pen/ExOKxmv

^ this is the result

>Solution :

I have a detailed article on how to create such an animation (and more): https://css-tricks.com/advanced-css-animation-using-cubic-bezier/

Here is the first code from the article:

.ball {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left: var(--x);
  top: var(--y);
  animation: x 1s, y 0.5s;
  animation-timing-function: cubic-bezier(.5, -800, .5, 800);
  animation-iteration-count: infinite;
}

@keyframes x {
  to {
    left: calc(var(--x) + 1px);
  }
}

@keyframes y {
  to {
    top: calc(var(--y) + 0.3px);
  }
}

<div class="ball" style="--x:300px;--y:100px;"></div>

Another version with transform for better performance

.ball {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left: 300px;
  top: 100px;
  animation: x 1s, y 0.5s;
  animation-timing-function: cubic-bezier(.5, -800, .5, 800);
  animation-iteration-count: infinite;
}

@keyframes x {
  to {
    translate: 1px 0;
  }
}

@keyframes y {
  to {
    transform: translatey(0.3px);
  }
}