CSS transition

by Tomek

HTML

<div id="container">
    <div id="slider"> </div>
</div>
<button id="move">move</button>

CSS

#container{
    border: 1px solid black;
    height: 10px;
    position: relative;
}
#slider{
    background-color: lightblue;
    position: absolute;
    width: 1em;
    height: 10px;
    
    /* 
    here is the thing
    more details here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
    */
    left: 0;
    transition:left 2s;
}

JavaScript

debugger;
var slider = document.getElementById("slider");
var button = document.getElementById("move")
//...
button.addEventListener("click", function(){
    debugger;
    slider.style.left = "100px";
});