They should work in IE7 and upwards (and other modern browsers) and contain no scripting. The animation is pure CSS only.

Try not to peek at my code unless you have no idea how to do this. If you can't think of anything to do then as a last resort try to improve on my versions above in some way.

I'm not looking for webkit transformations but something that we can use now in most of the major browsers. However, I'll be lenient with the rules as long as the demo is interesting.

The animations can be anything you can think of but something more than a simple on/off rollover effect.

Try not to use too many images to accomplish this either. My examples above use 2 images at most.

Unlike other quizzes please do post a link to your demo in this thread for all to see (do not PM me with your answers) and we will decide the best animation effect at the end of the quiz. If you do not have the facility to set up an online demo then post your code in this thread but make sure you attach the images you have used so we can see the effect.

Try to think of your own ideas and not copy others but of course you can be inspired by them.Here are a couple of classic examples of CSS animation to inspire you:

[Alex Walker's [URL="http://www.sitepoint.com/examples/stretchy/test.php"]demo](http://www.sitepoint.com/blogs/2008/01/18/in-the-lab-doing-strange-things-to-css-backgrounds/) - open and close the browser window horizontally.Román Cortés' 3d css.Remember this is just for funand there are no prizes.

haha nice one Dave Morton, sadly my demo after finally finishing it now only works in safari and chrome (other browsers go mad or crash), and not because of its css, but because of its html.

now i just need to fit it to screen size and im done.

what are your screen sizes btw?

Dave_Morton
—
2010-01-11T01:04:27Z —
#7

I test at screen sizes of 800x600, and 1024x768, when I think about it. Sometimes I forget. :-\

BTW, a couple of fun facts about the page I wrote:

1.) although the page is over 1200 lines long, the script that creates it takes up less than 50 lines of code. PHP is a wonderful thing. 2.) Since it's written in PHP, the locations of the party cell and the "go to jail" cells are randomly placed, making it a new game with every reload.

LOL this quiz should be called "Find crash bugs in browsers by just using HTML and CSS"

Dave_Morton
—
2010-01-11T11:05:13Z —
#11

@YuriThat, sir, is a raging BEAST! :eek: :lol: How you even came up with a concept such as that is beyond me. Working or not, my hat's off to you.

YuriKolovsky
—
2010-01-11T11:12:38Z —
#12

thank you Dave :D, Right now all that is left to do is to somehow find the opera/firefox bug's, fix them, and then add some javascript to make the sections highlight and stay lit.

Dave_Morton
—
2010-01-11T11:16:50Z —
#13

Again, @YuriHaving a look at your maze, I'm wondering if it could be done programatically, using different classes, such as n, s, e, w, ew, ns, etc. where the different classes have border properties that correspond to the cardinal directions they represent (e.g. class nw has border-top and border-left properties assigned), making for a truly (and sometimes, admittedly, unsolvable) maze. Hmmm. Something to think about.

PaulOB
—
2010-01-11T12:09:11Z —
#14

Dave and Timo well done - They both look good.:)

Timo - I have placed your version online to make it easier for others to see (use Safari to view that link).

I solved it but I had to use the keyboard because I couldn't do it with the mouse.

Great entries so far

YuriKolovsky
—
2010-01-11T12:19:52Z —
#15

didn't you read my comment paul?solve it fair or not at all. xD

YuriKolovsky
—
2010-01-11T12:23:02Z —
#16

Dave_Morton said:

Again, @YuriHaving a look at your maze, I'm wondering if it could be done programatically, using different classes, such as n, s, e, w, ew, ns, etc. where the different classes have border properties that correspond to the cardinal directions they represent (e.g. class nw has border-top and border-left properties assigned), making for a truly (and sometimes, admittedly, unsolvable) maze. Hmmm. Something to think about.

Ive been making mazes since i was 10, and one thing i have noticed is that they can not be made programatically as a lot of optical illusions and trickery is involved into tricking the person in the wrong direction, the original one was a little harder as it had a lot of "back to where you came from" paths that i had to remove.

When i ask someone to pass it on a piece of paper, 90% of the time i get told that it is impossible to pass and that i made a mistake somewhere (i didn't).

PaulOB
—
2010-01-11T12:23:21Z —
#17

YuriKolovsky said:

didn't you read my comment paul?solve it fair or not at all. xD

Yes - that was the first thing I ignored

YuriKolovsky
—
2010-01-11T12:25:37Z —
#18

a maze cheated is a maze wasted for nothing. the original one had the solution hidden at all times until you hovered over each correct square, but then the css became much too massive, so i simplified it and made it vulnerable to cheating.

at least mark your solution as a spoiler

PaulOB
—
2010-01-11T12:41:28Z —
#19

YuriKolovsky said:

at least mark your solution as a spoiler

Sorry I removed the link instead.

YuriKolovsky
—
2010-01-11T12:47:19Z —
#20

Thanks paul, can i post a javascriped version of it? i mean the css/html is the same, im just removing the annoying "touch the wall and die" effect.