set transition on changing position: CSS-CodePudding

I am trying to set transition on changing position of .ball div. But its not working.

<!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: 2s;
        }

        .stage:hover .ball{
            top: 0;
            right: 0;
        }

    </style>
</head>
<body>
    <div >
        <div ></div>
    </div>
</body>
</html>

I wanted .ball to move from top-left to bottom-right. But its not working

CodePudding user response：

Not sure if this is what you want, but I added the effect on hover, starting from 0 :

<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: 2s;
        transition-timing-function: ease-in-out;
    }

    .stage:hover .ball{
        top: 100%;
        left: 100%;
    }

</style>

</head>
<body>
    <div >
        <div ></div>
    </div>
</body>
</html>

CodePudding user response：

I Edited your example, I added the transformation on ball 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: 2s;
        }
        
        .ball:hover {
          transform: translate3d(270px, 270px, 0);
        }

        .stage:hover .ball{
            top: 0;
            right: 0;
        }

    </style>
</head>
<body>
    <div >
        <div ></div>
    </div>
</body>
</html>