Hover effect after mouse out

I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            .required::before {
                content: '';
                display:block;
                width: 10px;
                height: 10px;
                background-color: red;
                border-radius:10px;
            }
            .required::after {
                content: '';
                display:inline-block;
                width: 10px;
                height: 10px;
                background: blue;
                margin-left: -20px;
            }
            .required:hover::after{
                transform: translateX(100px);
                transition: 1s;
            }
        </style>
    </head>

    <body>
        <label class = required>Name</label>
    </body>
</html>

When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help