CSS animation!
Friday, 30 November 2007
Hacking CSS is a great challenge and can lead to interesting results, I’ve reignited my interest thanks to sirdarckcat and Thornmaker who have done some fantastic work. I wanted a way to do animation and loops in pure CSS and I think it’s sorta possible using meta refresh. I know meta refresh is slightly cheating but c’mon I’ve not got much to work with π The technique works by specifying multiple redirects at different intervals and uses the CSS target property to simulate the animation. Check out the demo π
No. 1 — November 30th, 2007 at 10:02 am
Hehe – cool. Is it possible to work with counter-increment and position absolute on hover?
Greetings,
.mario
No. 2 — November 30th, 2007 at 10:13 am
Maybe so I’ve not tried, could be some cool things in future π
No. 3 — November 30th, 2007 at 10:42 am
Here’s an example I posted a while ago, which has more target examples:-
http://www.businessinfo.co.uk/labs/css_attacks/css_scripting.php
No. 4 — November 30th, 2007 at 11:25 am
A loop can easily be created by specifying more redirects:-
http://www.businessinfo.co.uk/labs/cssanimation/cssloop.php
No. 5 — November 30th, 2007 at 1:51 pm
cool! looks like a new competitor to adobe arised π
No. 6 — November 30th, 2007 at 2:09 pm
Oh yeah I’ll bet Adobe are quaking in their boots at my 1fps animations π lol
http://www.businessinfo.co.uk/labs/cssanimation/csscale.php
http://www.businessinfo.co.uk/labs/cssanimation/csscale.phps
No. 7 — December 1st, 2007 at 4:05 am
Nice! Look, ma, no JavaScript!
No. 8 — December 10th, 2007 at 5:19 pm
With Linux – Opera and Firefox – dosnt work…
No. 9 — May 21st, 2009 at 12:40 pm
Works with Firefox on Mac OS X.
However as soon as the page is longer than one screen and offers a vertical scroll bar, the user looses his ability to scroll. Because every meta redirect target setting moves the page position, to the position of the anchor.