Edit in JSFiddle

document.addEventListener('DOMContentLoaded', function () {
    
    var box = document.querySelector('.box'),
        animate = document.querySelector('#animate'),
        list = document.querySelector('#list');
    
    animate.addEventListener('change', function () {
        box.classList[this.checked ? 'add' : 'remove']('smooth');
    }, false);
    
    list.addEventListener('click', function (e) {
        var type = e.target.dataset && e.target.dataset.type;
        if (type) {
            box.classList.toggle('box-' + type);
        }
    }, false);
    
}, false);

<label for="animate">
    <input type="checkbox" id="animate">
    Animate?
</label>

<ul id="list">
    <li><button data-type="backgroundColor">Adjust background colour</button></li>
    <li><button data-type="padding">Adjust padding</button></li>
    <li><button data-type="width">Adjust width</button></li>
</ul>

<div class="box">
    <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
</div>

.smooth {
    -webkit-transition: 0.5s;
       -moz-transition: 0.5s;
        -ms-transition: 0.5s;
         -o-transition: 0.5s;
            transition: 0.5s;
}

.box {
    background-color: #696;
    border: 1px dotted #000;
    padding: 5px;
    width: 200px;
}

.box-backgroundColor {
    background-color: #900;
}

.box-padding {
    padding: 50px;
}

.box-width {
    width: 400px;
}