CSS - Test Your CSS Skills Number 32 - animation

[stunic]

Roman came to me with the idea after seeing my duff-roll demo and wondered if this would be possible using just CSS. He produced the images and I investigated the possibilities of doing this in all CSS3 enabled browsers.
After trying several methods it became obvious that the only browsers capable of doing this were Safari and Chrome.
It basically involves having only two images on screen at any one time with the larger image at twice the scale of the smaller image and both zooming at the same time using 'scale'. Once the larger image reaches 2x zoom it is removed and another image added at 0.5x zoom over the remaining image which has now reached 1x zoom. And so on.....

The main problem was the timing of each keyframe to give a smooth transition from one set of images to the next. It required the use of cubic-bezier timing to make the animation look linear.
But we are both pleased with the result.

[YuriKolovsky]

the duff demo is a total mix of the rolling can and the animation we have been exploring.

its nice to see the thoughts/people getting mixed up and working together
i can imagine the difficulty with the timing.


very nice work indeed, too bad that unlike the coke can, this is unusable for real life use for many years to come...

Off Topic:

Now i think that your should introduce roman to these quizzes, i bet it will spawn a huge load of new ideas from him.

[ralph.m]

Wow, what a demo. Might be worth adding a warning to "fasten seatbelts and close your eyes if you suffer from vertigo".

[Rayzur]

Those are some fascinating CSS3 examples.

[molona]

errrrr... doesn't work for me... it is slow and it jumps the wall... but it is still a fantastic job. Not sure that I have the patience to do this

[Stomme poes]

Some of the examples posted didn't work on my browser (the rabbit, unfortunately : ( but the monkey did work) (FF3.5.6/Ubuntu).

Just like that it should work, however there is a webkit bug where in combination (I think from memory) in combination with the + selector it won't use the rule.

Yes I ran into this with my hovermaps, and luckily it was a bug in older Chrome (dunno which "version" as I never see version numbers with that browser) and Safari3.

Safari4 beta came out with the bug fixed, and since updating my copy of Chrome on the Windows VB it seems they also fixed the bug (but not until after Saffy4 came out so I guess the webkit teams are split??). By the time Chrome/Linux came out it was gone. That was
something:hover + element {new style;}

I've never, ever used the ~ selector.

Hm, yes, I totally agree with getting Román into these quizzes! Someone email him.

I didn't even think to look at these latest quizzes but now that I've seen a few, I wonder if I can do some incorporations with my fat cat-ball cartoons for kids to mouse around with (I hate Flash). Only issue would be all the stuff that's not cross-browser... though on the other hand, this could be a great way to get people some better browsers... just tell the kids they need Free Browser X and a download link, and viola! The parents find strange new browsers on their desktop : )

I once had an animated gif of the cat barfing, looking at the barf, deciding it looked tasty, and eating it again. An endless cycle of fun...

so let's do these with animated gifs! I've seen Stu's got some pretty old ones and I've used it in the Guisy.eu menu for the "games" section which is cute. Imagine like 10 animated gifs combined with these ideas... it could get very psychedelic.

We prolly need a warning for epileptics if we go in that direction though.

[Paul O'B]

Back to a simple puzzle with a few lines of code.

Find the buried treasure:

http://www.pmob.co.uk/maze/treasure2.htm
http://www.pmob.co.uk/maze/treasure.htm

I could have made them a lot harder but you get the idea

[Rayzur]

Find the buried treasure:

I found the gold with my static treasure map!

Edit:
Oh cool! I see how it works now.

[stunic]

I have contacted Javier Román to ask him if he would like to become a member and participate in these quizzes.

[Paul O'B]

Thanks Stu - that's very kind of you

[stunic]

Román Cortés has produced this demo that you may find interesting:
http://www.romancortes.com/ficheros/hanoi.html

[YuriKolovsky]

ahhahaa

Stu Nicholls made me do it for Sitepoint :P

thanks stu for making him produce another high quality product xD


amazing amazing amazing

I can finally bow down to Roman, and give him my hat.

[Stomme poes]

/*applauds*/

Now let's see him do th 4 old men crossing the bridge with the flashlight! : )

[Paul O'B]

Amazing

Very clever use of fragment identifiers. (We did a dropdown in an earlier quiz based on a similar technique but nowhere near Roman's excellent demo.)

Thanks for posting it Stu as I love to see these demos.

[Paul O'B]

/*applauds*/

Now let's see him do th 4 old men crossing the bridge with the flashlight! : )

Or the one man in a boat crossing a river with a fox, goose and bag of beans.

[Stomme poes]

haha, I learned it with "grain" but, yes.

Also with bickering couples and jealous husbands : )

[Raffles]

That's amazing. I'm dumbstruck.

What are "fragment identifiers"?

[stunic]

It uses similar methods to some of my demos on CSS play:
http://www.cssplay.co.uk/menu/double...-vertical.html for instance.

With relative links to 'image sets' depending on which arrow is clicked.
The scroll bars in this case are covered by two divs so that you do not see them.

If you place the mouse over the image then you can use the wheel to scroll up and down through the different combinations of disc positions.

[Raffles]

I see. The concept is quite simple, but the execution is very clever.

[stunic]

The only drawback to this is that if the demo is not at the top of your page and your page has vertical scroll bars, then when you click one of the left/right arrows the demo will jump to the top of the browser window.

[Raffles]

I notice a similar thing with your gallery demo - clicking the green arrows makes the page scroll down to the gallery area. It's a small drawback, but still annoying. A smattering of JS would solve the problem, but then that would defeat the point.

[stunic]

If the page has no scrollbars then there is no jump. So if you know the limitations then you can overcome the problem. With my version you cannot scroll the images but it does not work in Opera.

[Paul O'B]

We had a similar problem with Opera in the earlier quiz to make a menu persistent when clicked. Timo's managed to get a solution that worked in Opera also (see post#59).

[stunic]

Now if anyone can stop this jumping to the top of the browser window it could be very useful

[YuriKolovsky]

doesn't using nonexistent hashes work? like href="#void"?