How can I make a checkbox slide back to its position after unchecking it?

I am making a Checkbox Toggle Slider for a website and I got the checkbox to slide when its checked but I cant figure out how to make it smoothly slide back to its original position. Any help would be much appreciated!!

#spherewishlist
{
    height:40px;
    width:70px;
    background-color:gray;
    border-radius:40px;
    display: block;
    border-color: white;
}
#circlewishlist
{
    height:36px;
    width:40px;
    background-color:white;
    border-radius:100%;
    display: block;
    box-shadow: 0px 1px 1px  #141414;
    position:relative;
margin-left:3px;
    content:url('white-circle-frame-with-shadow-free-png.png');
        appearance:none;
top:41px;
}

#circlewishlist:checked
{   animation-name:slidewish;
    animation-duration: 1s;  
    right:-24px;
}
#circlewishlist:checked + #spherewishlist
{background-color:green;}
@keyframes slidewish
{    0%{left:0px;}
    100%{left:24px;}
}

this is the html

<div>
    <input id="circlewishlist" type="checkbox"><!-- this is the circle-->
    <div id="spherewishlist"></div><!-- this is the sphere-->
   </div>