How can I start an animation on click - animation

Question

I am trying to create an egg that cracks open, it works, but the animation starts on its own. How can I make it work that the egg only opens when the user clicks on it?
I've tried using jQuery, javascript and only css. And searched the whole internet. But I just don't get it to work. This is my first animation, so I don't know much about it.
Here is my code:
<div id="easter-egg-animation">
<div class="easter-egg">
<div class="egg">
<div class="egg-top">
<div class="day">1
</div>
</div></div>
<div class="egg-bottom"></div>
<div class="shadow"></div>
<div class="text">happy <br> easter</div>
</div>
body {
display: flex;
background: grey;
align-items: center;
justify-content: center;
height: 100vh;
}
#easter-egg-animation {
position: relative;
cursor: pointer;
transform: translate(-90%);
transition-property: transform;
transition-duration: 9s;
}
.egg {
}
.day {
position: relative;
align-items: center;
justify-content: center;
top: 45px;
left: 65px;
font-size: 30px;
padding-top: 30px;
color: white;
}
.egg-top {
border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
background-color: pink;
width: 140px;
height: 120px;
position: absolute;
transform-origin: left;
top: -20px;
left: 0;
right: 20px;
animation: open .5s ease forwards .5s;
}
#keyframes open {
0% {transform: rotate(0);}
100% {transform: rotate(-150deg); top: 90px; left: -30px;}
}
.egg-bottom {
border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
background-color: pink;
width: 140px;
height: 80px;
position: relative;
top: 100px;
}
.egg:before, .egg:after, .egg-top:before, .egg-bottom:before {
content:"";
position: absolute;
border-style: solid;
}
.egg:before {
top: -0px;
}
.egg:after {
top: -0px;
left: 140px;
}
.egg-top:before {
top: 10px;
}
.egg-top:after {
content:"";
position: absolute;
width: 25px;
height: 60px;
border-radius: 50%;
transform: rotate(-27deg);
top: 15px;
left: 115px;
}
.shadow {
position: absolute;
width:220px;
height:30px;
background-color: rgba(0,0,0,.1);
border-radius:50%;
z-index:-1;
top:147px;
left:-27px;
}
.text {
position: absolute;
top: 110px;
left: 45px;
text-align: center;
color: pink;
font-size: 24px;
z-index:-1;
background-color: white;
transform-origin: bottom;
animation: up 1s ease forwards 1.5s;
}
#keyframes up {
0% {transform: translateY(0) scale(1);}
100% {transform: translateY(-80px) scale(2);}
}