Blob Checkbox Flat

Prototype for a blobby checkbox

by TastyBytes

HTML

<div id="blobCheck" class="blobContainer">
    <div class="blob"></div>
</div>

CSS

@-webkit-keyframes blobCheckAnim {
    0% { left: 0; }
    33% {
        border-bottom-right-radius: 25% 50%; 
        border-top-right-radius: 25% 50%;
        border-bottom-left-radius: 50%; 
        border-top-left-radius: 50%;
        width: 120px;
        height: 40px;
        left: 0;
        top: 10px;
    }
   
    
    100% { left: 60px; }
}

@-webkit-keyframes blobUncheckAnim {
    0% { left: 60px; }
    33% {
        border-bottom-left-radius: 25% 50%; 
        border-top-left-radius: 25% 50%;
        border-bottom-right-radius: 50%; 
        border-top-right-radius: 50%;
        width: 120px;
        height: 40px;
        left: 0px;
        top: 10px;
    }
   
    
    100% { left: 0px; }
}

.blobContainer {
    width: 120px;
    height: 60px;
    padding: 5px;
    background: #666;
    border-radius: 41px;
    
    -webkit-transition: .2s all;
}
.blob { 
    width: 60px;
    height: 60px;
    background: #B2FF71;
    border-radius: 50%;   
    position: relative;
    left: 0;
    top: 0;
    -webkit-animation: blobUncheckAnim .25s ease-out;
}
.blobContainer.checked .blob {
    -webkit-animation: blobCheckAnim .25s ease-out;
    left: 60px;
}

.blobContainer.checked {
    background-color: #5a5;
}
}

JavaScript

var blobCheck = document.getElementById('blobCheck');

blobCheck.onclick = function() {
    checkedTest = /\s?checked/ig;
    
    if ( checkedTest.test(blobCheck.className) ) {
        blobCheck.className = blobCheck.className.replace(checkedTest, '');
    } else {
        blobCheck.className += " checked";
    }
}