求助：CSS设置.ball元素位置变化过渡效果失效问题

你的过渡效果失效有两个核心问题：

1. 定位属性不统一
   初始状态给.ball设置了left: 0，但hover触发后用的是right: 0——CSS过渡只能在同一属性的数值变化间生成平滑动画，不同属性的切换不会触发过渡。

2. 垂直方向未设置变化
   hover状态下top: 0和初始状态完全一致，所以元素只会在水平方向跳动，不会移动到右下角。

修复方案一：统一使用left和top属性 #

通过计算父容器与小球自身的尺寸差值，设置hover状态的位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .stage{
            height: 300px;
            width: 300px;
            background-color: lightblue;
            margin: 50px auto;
            position: relative;
        }
        .ball {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: rgb(119, 40, 40);
            position: absolute;
            left: 0;
            top: 0;
            transition: all 2s ease;
        }

        .stage:hover .ball{
            /* 父容器宽高300px，小球自身30px，偏移量为300-30=270px */
            left: 270px;
            top: 270px;
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="ball"></div>
    </div>
</body>
</html>

修复方案二：使用transform: translate()（推荐） #

transform属性的过渡性能更优，且无需计算固定数值：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .stage{
            height: 300px;
            width: 300px;
            background-color: lightblue;
            margin: 50px auto;
            position: relative;
            overflow: hidden; /* 防止小球移动时超出容器范围 */
        }
        .ball {
            height: 30px;
            width: 30px;
            border-radius: 50%;
            background-color: rgb(119, 40, 40);
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 2s ease;
        }

        .stage:hover .ball{
            transform: translate(calc(100% - 30px), calc(100% - 30px));
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="ball"></div>
    </div>
</body>
</html>

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