Relatively-positioned Animations

by wittnl

HTML

<div class="container">
    <div id="onehundred" class="object">A</div>
</div>
<div class="container">
    <div id="fifty" class="object">B</div>
</div>

CSS

.object {
    border-radius: 50%;
    position: relative;
    background: maroon;
    width: 10%;
    overflow: hidden;
    text-align: center;
    margin: 1em 0;
    font: 40px/48px arial, helvetica, sans-serif;
    left: 0%;
    top: 0%;
}

.container:nth-child(odd) {
    background: #c1c1c1;
}

.container:nth-child(even) {
    background: #a3a3a3;
    width: 50%;
}

JavaScript

function init() {
    animate(1500);
}

function animate(duration) {
    $('#onehundred, #fifty').css("left",0).animate({left:"90%"}, duration).promise().then(function() {
        animate(duration);
    });
}

$(document).ready(init);