Delving into the world of CSS animations has presented me with a challenge involving transform: scale(); One element is centered using transform: translate(); as shown below:
.gameContainer__deck {
width: 60%;
height: 700px;
z-index: 2;
display: flex;
flex-wrap: wrap;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
}
Here is the animation in question:
@keyframes scale-down {
0% {
transform: scale(1);
transform-origin: top left;
}
100% {
transform: scale(0);
transform-origin: bottom right;
}
}
.anScaleDown {
animation: scale-down 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
The issue arises where the animation starts from the original position set by the top and left properties, disregarding the transform: translate(-50%, -40%); directive. I have attempted to find a solution to animate the element from the translated position, but so far, my efforts have been fruitless. Changing the centering method is not an option due to the need for responsive width.