I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This method becomes complex as the percentage translation is relative to the object's dimensions, meaning adjustments are needed if the object size changes.
.container {
position: relative;
width: 40%;
padding-bottom: 40%;
height: 0;
background: #cdc;
}
.seats {
position: absolute;
width: 100%;
height: 100%;
}
.seats .seat {
position: absolute;
width: 20%;
height: 20%;
}
.seat.one {
bottom: 0%;
left: 50%;
}
.seat.two {
bottom: 50%;
left: 0%;
}
.seat.three {
bottom: 50%;
left: 80%;
}
.cards {
position: absolute;
height: 100%;
width: 100%;
}
.cards .dealer {
position: absolute;
bottom: 90%;
left: 50%;
}<div class='container'>
<div class="cards">
<div class="dealer">
Dealer
</div>
</div>
<div class="seats">
<div class="seat one">
<div class="hand">
Hand 1
</div>
</div>
<div class="seat two">
<div class="hand">
Hand 2
</div>
</div>
<div class="seat three">
<div class="hand">
Hand 3
</div>
</div>
</div>
</div>I am looking for a more efficient way to animate the translations of the elements without needing so many custom calculations and tweaks. Specifically, I want to smoothly move Hand 1/2/3 towards Dealer, with the animation reversible as well.
The current translation method does not work properly when resizing the container element. Is there an alternative approach that simplifies the process of translating DOM elements?