CSS - Test Your CSS Skills Number 32 - animation

[Paul O'B]

Ok - Last one from me as I have some work to do this week.

Nothing special or complicated just a little game for 2 players.

(It could do with a php script to randomise the order on page load)

[ralph.m]

Very nice, Paul. Works well. I usually lose games like this, but just played against myself and WON! Yay!

[Stomme poes]

I usually lose games like this, but just played against myself and WON! Yay!

You do realise that this means you also lost, right?

[ralph.m]

You do realise that this means you also lost, right?

Awww... Hey, I'm a reforming pessimist, so I'm trying to be positive...

[webgyver]

FM

Freaking Magic!

[GCB]

Very interesting. I wouldn't have known you could do something animated with CSS alone. Very clever and informative!

[Paul O'B]

Hi,

I forgot I left this quiz still open so it's about time we call it complete although if anyone want to continually add to this thread please feel free.

As it's been so long I'm not going to vote a winner because it would be subjective anyway so I'm declaring all entries as joint first

Thanks to all those that contributed as there have been some fantastic and exciting demos.

For your ease I'm going to list the online versions below but remember that some demos are only targeted at specific browsers so you may need to browse the quiz to ascertain which browser to view in if not documented on the actual page.

ME:
http://www.pmob.co.uk/maze/maze3.htm
http://www.pmob.co.uk/maze/magnify.htm
http://www.pmob.co.uk/maze/catch-me2.htm
http://www.pmob.co.uk/maze/dots4.htm
http://www.pmob.co.uk/maze/bars.htm
http://www.pmob.co.uk/maze/light.htm
http://www.pmob.co.uk/maze/treasure2.htm
http://www.pmob.co.uk/maze/treasure.htm
http://www.pmob.co.uk/maze/one2nine.htm
http://www.pmob.co.uk/maze/addup.htm
http://www.pmob.co.uk/maze/pairs.htm


Yurikolovsky:
http://www.pmob.co.uk/maze/entries/timo-maze.htm
http://www.pmob.co.uk/maze/entries/maze.js.html
http://www.geekcavecreations.com/sixthSense.htm
http://www.geekcavecreations.com/Timo/cssBook.php
http://timo.geekcavecreations.com/affe.html
http://timo.geekcavecreations.com/pepsi/


Dave Morton:
http://www.geekcavecreations.com/css_animation.php
http://www.geekcavecreations.com/css_maze.php
http://www.geekcavecreations.com/mazeClass.php


drjochum:
http://web.drjochum.de/css_fun/catch_it.htm
http://web.drjochum.de/css_fun/click_and_run.htm


Stu Nichols:
http://www.cssplay.co.uk/menu/css3-animation.html
http://www.cssplay.co.uk/menu/css3-can-roll.html
http://www.cssplay.co.uk/menu/css3-zoom.html
http://www.cssplay.co.uk/menu/css3-duff-roll.html


Roman Cortez:
http://www.romancortes.com/blog/pure-css-coke-can/
http://www.romancortes.com/ficheros/hanoi.html

Thanks to all the above for their interest and inspiration and for all of those who have been watching.

[Paul O'B]

NEW (easy) Quiz Posted

[YuriKolovsky]

Thats a lot more entries that it seemed!

[Paul O'B]

Yes I was surprised and it was fun to go through them again

[Paul O'B]

Had an hour spare today and thought these would be fun.

The first one only works in safari with animation.
http://www.pmob.co.uk/temp/dock-example3.htm

Then I attempted to make the previous entry also light up but safari is very buggy with "li:hover + li" and messes it up.

Firefox handles it fine but doesn't do the animation of course.
http://www.pmob.co.uk/temp/dock-example2.htm

Not particularly useful but fun all the same

[YuriKolovsky]

haha really fancy Paul!! why haven't I learned css3 already...
Sorry that I don't have anything to provide

Off Topic:

(plus it's my birthday on 23rd :P)

[stunic]

My birthday was the 20th (64 years old now).
Here's one I did recenlty with CSS3 animaton
http://www.cssplay.co.uk/menu/css3-picture-gallery.html

[Paul O'B]

Happy Birthday Timo and belated Happy Birhday Stu August is a good month for birthdays as mine was on the 6th (58) so I'm catching you up Stu.

Nice demo Stu (as usual). It's amazing what can be done with css these days.

[YuriKolovsky]

The example you made Stu seems very laggy in safari and very pix-elated in chrome :S
I'm really hoping the browsers catch up and fix up their css engines.

Off Topic:


<rant>
I have little idea on how css engines work, but it looks like instead of doing the whole process interpreting css3 (and disabling smooth effects for those who wish them disabled) browsers could do:
interpret->optimize->cache->use
while so far browsers either do only
interpret->optimize->use in safari and its laggy
and only interpret->use in chrome like as if css3 is the same thing as css2...
and in the worst case even the browsers css interpretation is broken...
</rant>

Off Topic:


Thanks!
hurry up Paul you need to catch up to Stu faster! :P
seems it's a lion cage here! (so far all leo's)