CSS Animating an egg to crack open

HTML & CSS
1

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

#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?

2

Hi,

That sounds like quite a job :slight_smile:

I’d probably simplify it and use 3 images. One image for the egg (which you can still shake with your code) and then two images for the top and bottom cracked sections which you could simply move and rotate with keyframes.

You can make the crack effect by animating a series of lines up and down the egg (much the same as in this graph demo).

I think that could work but haven’t got time to play around with that as it could take a while to get right :slight_smile:

3

Thanks, that helps a lot. Another question though, what’s the best way to make the original whole egg image disappear once the cracked sections become relevant?

4

I guess you could build it into your keyframes and once the crack has finished drawing you could set the original images opacity to zero. You can set delays and timings as required and you should be able to marry them all up. A lot of the time it’s trial and error and practice. I did this animation a while ago but I’d have to dig into the code again to remember how to do it :slight_smile:

If you have a go at it first then when you get stuck post your html and css and then we will have something to work with to give more specific advice.

5

Alright I’ve got it to a good point, your advice helped me step in the right direction. I ended up just doing 2 images with a split already in them that doesn’t show itself until they actually separate. Still needs some work to get them to switch animations on click (still pretty new to javascript), but I’m much better off than I was. Much appreciated!

6

Glad you are making progress .

Be sure to show us when you have finished it :slight_smile:

7

So here’s where I’m at currently:

I guess I can’t add images to this? The egg itself is shaking over the part that says “code”, and when you click it breaks and the code moves up to the box.

What I need help with now is making the word “code” go to the box wherever it is. At the moment I have it manually going to the coordinates the box is at, but for users who visit the page with different browser sizes and such, I want it to go exactly to the div of the box instead of just pre-planned coordinates. What’s the best way to go about that?

8

Hi,

I guess you would need to grab the co-ordinates of the box and then adjust the values in the keyframe to match. This sounds like a heavy lifting job for javascript and is beyond my skills.

There is an article here that shows how to change the keyframe values dynamically but it looks quite complicated. Wouldn’t it be easier just to do as you have done and fix the relationship between the egg and the box to avoid all that extra code?

9

The problem I’m worried about is people with varying browser sizes, if I use an absolute value then it might not end up the exact same spot for everyone. I didn’t know if there was some command for making it look for a certain ID (in this case “textbox”), and move to that ID wherever it happened to be. At the moment it’s just going 20px left and 220px up from where it starts. I’m also just assuming that it WILL be a problem, using that value could actually just be perfectly fine for everyone, I just wasn’t sure and wanted to nip it right away in case it was a problem.

10

Hi,

You could make sure the relationship between the egg and the code box was always the same as I mentioned above. It will only change position if you have it inside a fluid structure or you have varying content.

If you need them independent of each other then it will be a job for scripting and you would need to find the co-ordinates of both through JS and then update the keyframe with the new co-ordinates which in a fluid layout would mean doing this on resize also.

Seems to me it would be better to keep it simpler but of course I don’t know what your final layout will look like or how you need it to behave.