I am attempting to create an animation of a circle splitting open on two sides, similar to the 🎊 emoji flipped upside down. I have positioned two half-circle elements next to each other. However, my attempts to animate one side are not producing the desired effect - I want the split to pivot at the bottom of the semi-circle rather than in the middle. When I rotate one of the halves, they end up overlapping due to their proximity, and I have yet to find a solution for this issue (I considered moving one to the left or right during the animation, but I'm unsure...).
.circlecontainer {
display: flex;
justify-content: center;
align-items: center;
}
.halfright {
width: 150px;
height: 300px;
border-top-right-radius: 150px;
border-bottom-right-radius: 150px;
background: orange;
}
.halfleft {
width: 150px;
height: 300px;
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
background: orange;
animation: splitleft 3s;
}
@keyframes splitleft {
0% {
transform: rotate(-0deg)
}
100% {
transform: rotate(-90deg)
}
}<div class="circlecontainer">
<div class="halfleft"></div>
<div class="halfright"></div>
</div>That's the current state of the project! I hope my explanation is clear enough as it can be quite tricky to describe...