I am trying to achieve a smooth leftward movement and expansion animation for a div. Currently, I am experimenting with class switching on click events to transition between the desired states. However, I am facing difficulty in making the element first move left and then expand, as it tends to do both simultaneously or expand first before moving back when re-clicked.
My goal is to have a functionality where I can click to move the element left, then expand it, and finally re-click to revert back to its original position. Ideally, I would prefer implementing this in JQuery.
HTML:
<div class="box" id="box2">
<h1 class="headline">BOX</h1>
</div>
CSS:
.box_clicked {
height: 500px;
width: 500px;
background-color: rgba(0, 0 , 0, 0.8);
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.box {
height: 200px;
width: 300px;
background-color: rgba(0, 0 , 0, 0.8);
position: relative;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.move-left {
right: -100px;
background-color: red;
}
Here is my jsfiddle link for reference.
Thank you!