CSS | Transitions

by Zoltan Boros

HTML

<div>
    <button id="moveButton" type="button">Move</button>
</div>
<div class="box-container">
    <div id="box" class="box"></div>
</div>

CSS

.box-container {
    position: relative;
    margin: 0 50px;
}
.box {
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    background-color: #88f;
    transition: left 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.box.moved {
    left: calc(100% - 50px);
}

JavaScript

function move()
{
    box.classList.toggle("moved");
}

var box = document.getElementById("box");
document.getElementById("moveButton").addEventListener("click", move);