CODEWITHSUNDEEP
csshovercss-animations
djpredator17
djpredator17

Reputation: 103

CSS3 multiple animation effect

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)"?

Upvotes: 2

Views: 405

Answers (1)

Todd Baur
Todd Baur

Reputation: 1005

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; 

}

Upvotes: 1

Related Questions