CSS3 multiple animation effect

Question

I've to set up a child targeted website, and I would like to have some images to animate on hover or onclick (CSS only, just for fun, i already know how to do it in JS). Did you ever see a Disney game? The menu isn't really there, you've just some images (let's say a calendar, or a drawer) that animates if you go over them. I've an image of a girl (all the drawings are comic-style), and i'd like the girl to greet you if you hover her. Then, the animation is divided in different steps: 1) The arm is put down, and hidden by a desk. There are three images: the girl, the forearm and the hand (plus the last part of the arm). 2) Hover! The forearm moves up, let's say 85-90 degrees. 3) The forearm stops, but the rest of the arm and the hand continue to move (left, right, left right, and again). Just think about it, when you greet someone :)

At the moment i'm just able to make the girl move just once (the whole arm moves up, but that's not as natural as i want). How to achieve the multiple animations i want?

Thank you very much!

P.s. I don't want to make this comfortable with all browsers, just webkit+mozilla, don't care about IE.

EDIT:

What about multiple transitions over time? Something like "translate(0,4em)" and after x seconds "rotate(50deg)"?

Todd Baur · Accepted Answer · 2012-06-16 16:36:24Z

1

You might consider looking at @keyframes to achieve something using pure CSS, but bear in mind your browser support is going to limit you. Check out caniuse.com to see what the breakdown might be. Otherwise you are looking at programming it using with a lot of javascript, sprites, and CSS. Flash is always an option too, albiet not a popular one but one found often on gaming sites like you describe.

So something like this in CSS:

//webkit only here:
@-webkit-keyframes fade-in {
0% {
    -webkit-transform: ease-in-out(0);
opacity: 0;
}
50% {
    opacity: 0;
}
100% {
 -webkit-transform: ease-in-out(1);
opacity: 1;
}
}

#el{
-webkit-animation-duration: 1.5s;
-webkit-animation-name: fade-in; 

}

edited Jun 16, 2012 at 16:36

answered Jun 16, 2012 at 16:17

Todd Baur

1,0059 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS3 multiple animation effect

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related