So basically, I have an egg made with CSS that shakes. I would like to make the egg crack open when clicked, revealing a coupon code that will also be animated, and enter itself into the coupon code field.

This is the egg I have so far

Code CSS:
#eggshake {
    font-size: 40px; 
    width: 130px;
    height: 160px;
 
    margin-left: 50%;
    margin-top: 50px;
    border-top-left-radius: 50% 60%;
    border-top-right-radius: 50% 60%;
    border-bottom-left-radius: 50% 40%;
    border-bottom-right-radius: 50% 40%;
    background: #f2b679 -webkit-radial-gradient(left top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .1));
    -webkit-transform-origin: center 80%;
    -webkit-animation: shake 1s infinite alternate;
    -webkit-transition: opacity 3s ease;
}
@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(0);
    }
    10% {
        -webkit-transform: rotate(10deg);
    }
    20% {
        -webkit-transform: rotate(-10deg);
    }
    30% {
        -webkit-transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(5deg);
    }
    70% {
        -webkit-transform: rotate(-5deg);
    }
    100% {
        -webkit-transform: rotate(0);
    }
}

I'm having trouble making it do the cracking open on click. I haven't tried to work on the animated coupon code part yet so I don't know how much of an issue that will be. Any ideas on how I can accomplish this?