Edit in JSFiddle

<button id='set-quarter' onclick='setCssClass("seperempat");'>25%</button>
<button id='set-half' onclick='setCssClass("setengah");'>50%</button>
<button id='set-full' onclick='setCssClass("full");'>100%</button>
<br/>&nbsp;
<div id='sample-container'>
    <div id='sample1' class='seperempat'></div>
</div>

#sample-container {
    position: relative;
    width: 300px;
    background: blue;
    height: 25px;
}

#sample1 {
    background-color: red;
    position: absolute;
    height: 25px;
    transition: width 1s;
}

.seperempat {
    width: 25%;
}

.setengah {
    width: 50%;
}

.full {
    width: 100%;
}

var g = function(id){ return document.getElementById(id); };

function setCssClass(cls){
    var sample = g('sample1');
    sample.className = cls;
}