SOURCE

var one=document.querySelector(".one");
var two=document.querySelector(".two");
var three=document.querySelector(".three");
var box=document.querySelectorAll(".box > div");
console.log(box);
var flag=[true,true,true];
box.forEach(function(item,index) {
    item.addEventListener("click",function() {
        if (flag[index]==true) {
            this.classList.add("moveup")
            this.classList.remove("movedown")
            
            flag[index]=false;
        }
        else 
            {this.classList.remove("moveup")
            this.classList.add("movedown")
            flag[index]=true;
        }
    })
})
    

<div class="box">
    <div class="one">
        <div class="onecir"></div>
    </div>
    <div class="two">
        <div class="twocir"></div>
    </div>
    <div class="three">
        <div class="threecir"></div>
    </div>
</div>

.one, .two, .three {
    display: flex;
    /* flex-direction: column; */
    /* justify-content: center; */
    align-items: center;
    margin: 10px;
    width: 100px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(207, 207, 207);
    transition: .5s;
}
.onecir, .twocir, .threecir {
    margin: 2px;
    width: 35px;
    height: 35px;
    background-color: whitesmoke;
    border-radius: 17.5px;
    transition: .5s;
}
.box {
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: mediumaquamarine; */
}
.moveup {
    animation: moveup .5s forwards;
}
@keyframes moveup {
    50% {transform: scale(1.2)}
    100% {transform: scale(1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: lightcoral;
    }
    
}
.movedown {
    animation: movedown .5s forwards;
}
@keyframes movedown {
    50% {transform: scale(1.2)}
    100% {transform: scale(1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    }
}