SOURCE

<div class="box">
    <div class="dot"></div>
</div>

.box{
    width: 300px;
    height: 300px;
    border: 1px solid blue;
}
@keyframes moveX{
    100%{
        transform: translateX(calc(300px - 20px));
    }
}
@keyframes moveY{
    100%{
        transform: translateY(calc(300px - 20px));
    }
}

.dot{
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    animation: moveX 1s linear infinite alternate, moveY 1s cubic-bezier(.55, 0, .85, .36) infinite alternate;
    animation-composition: add;
}