@keyframes child-animation {
    0% {
        transform: translate(0);
    }
    
    25% {
        transform: translate(500px, 0);
    }

    50% {
        transform: translate(500px, 500px);
    }

    75% {
        transform: translate(0px, 500px);
    }

    100% {
        transform: translate(0);
    }
}
p {
    text-align: center;
}

.container {
    width: 500px;
    height: 500px;
    background-color: antiquewhite;
    margin: auto;
}

.child {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: child-animation 4s infinite;
}