JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="my-checkbox">

CSS

.my-checkbox {
    transform: translate3d(50px, 0, 0);
    animation: moveRight 1s;
    /*animation: moveLeft 1s;
    animation-direction: reverse;*/
}

.my-checkbox:checked {
    transform: translate3d(0px, 0, 0);
    animation: moveLeft 1s;
}


@keyframes moveLeft
{
    from {transform: translate3d(50px, 0, 0);}
    to   {transform: translate3d(0px, 0, 0);}
}


@keyframes moveRight
{
    from {transform: translate3d(0px, 0, 0);}
    to   {transform: translate3d(50px, 0, 0);}
}