CSS关键帧中使用transformorigin存在问题的解决方案

.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;
        }
    }

.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>

.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);
  }
}

<div class="ball"></div>

Css相关问答推荐

当鼠标悬停在元素的：：第一行时，如何应用样式？

如何在CSS中创建水平/垂直对称的虚线边框？

你能混合固定/相对定位吗？

如何在 CSS 中使 Flex 容器内的网格响应，而不 destruct 外部 Flex 容器的布局？

CSS Select 器 $parent > $child Select 嵌套列表中的所有

子元素

如何在不使用 ！important 的情况下提高优先级？

图像占用尽可能多的空间但保持宽高比并包含在窗口高度中

如何禁用 Angular Material Pagination 按钮的波纹效果？

CSS nth-child 表示大于和小于

如何始终在浏览器中显示垂直滚动条？

为什么 .class：last-of-type 不能按我的预期工作？

加载资源失败：服务器响应状态为 404(未找到)

通过javascript删除或禁用浏览器的焦点边框

输入和文本字段中的背景 colored颜色

多个和/或嵌套的 bootstrap 容器？

如何知道哪个 HTML 元素导致了垂直滚动条

将 webkit 滚动条样式应用于指定元素

在 CSS 中结合border-top、border-right、border-left、border-bottom

使用 CSS 使 span 不可点击

谷歌的无图像按钮