How can I start an animation on click

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);}
}