CSS动画实现盒子从原点持续环绕旋转问题咨询

我是CSS动画新手，做了带子盒子的父容器，现在子盒子能上下左右交替移动，但想要实现从原点开始持续环绕旋转的效果。尝试用transform: translateX(-232%)让它回到原点没成功，代码如下：

<div class="parent">
    <div class="child"></div>
</div>

<style>
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    font-size: 1.22rem;
    line-height: 1.2;
}
.parent {
    background: #aed4ff;
    height: 300px;
    width: 300px;
}
.child {
    background-color: rgb(143, 36, 36);
    width: 90px;
    height: 90px;
    display: block;
}
.parent:hover .child {
    animation: left-to-right 2s ease-in-out forwards;
    animation-play-state: paused;
    cursor: pointer;
}
@keyframes left-to-right {
    0% {
        transform: translateX(0);
        color: red;
    }
    33% {
        transform: translateY(232%);
    }
    50% {
        background-color: blue;
    }
    66% {
        transform: translateX(232%) translateY(232%);
    }
    100% {
        transform: translateX(232%);
        background-color: black;
    }
}
</style>

问题分析与修复方案 #

你的动画核心问题在于：

• CSS的transform是覆盖式属性，单独写translateY会丢掉之前的translateX值，导致移动路径断裂
• 硬编码的百分比数值适配性差，且没有按矩形环绕的完整路径设置关键帧

修改后的完整代码 #

<div class="parent">
    <div class="child"></div>
</div>

<style>
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}
body {
    font-size: 1.22rem;
    line-height: 1.2;
}
.parent {
    background: #aed4ff;
    height: 300px;
    width: 300px;
    position: relative;
    overflow: hidden;
}
.child {
    background-color: rgb(143, 36, 36);
    width: 90px;
    height: 90px;
    display: block;
}
.parent:hover .child {
    animation: rotate-around 4s linear infinite;
    cursor: pointer;
}
@keyframes rotate-around {
    0% {
        transform: translateX(0) translateY(0);
        background-color: rgb(143, 36, 36);
    }
    25% {
        transform: translateX(calc(100% - 90px)) translateY(0);
        background-color: blue;
    }
    50% {
        transform: translateX(calc(100% - 90px)) translateY(calc(100% - 90px));
        background-color: black;
    }
    75% {
        transform: translateX(0) translateY(calc(100% - 90px));
        background-color: green;
    }
    100% {
        transform: translateX(0) translateY(0);
        background-color: rgb(143, 36, 36);
    }
}
</style>

关键修改点说明 #

• 父容器添加position: relative确保子盒子位移参考父容器，overflow: hidden避免子盒子超出父容器范围
• 动画用linear保证匀速运动，infinite实现持续循环效果
• 用calc(100% - 90px)计算位移，替代硬编码百分比，适配父容器尺寸变化（90px为子盒子的宽高）
• 每一步关键帧同时保留translateX和translateY，保证路径是连续的矩形环绕
• 去掉animation-play-state: paused，若需要hover时暂停，可将默认状态设为animation-play-state: paused，hover时改为running

内容的提问来源于stack exchange，提问作者Kai