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 :P The technique works by specifying multiple redirects at different intervals and uses the CSS target property to simulate the animation. Check out the demo :D

CSS animation demo

The entry 'CSS animation!' was posted on November 30th, 2007 at 9:55 am and is filed under Cascading Style Sheets, Security. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

9 Responses to “CSS animation!”

  1. .mario writes:
    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

  2. Gareth Heyes writes:
    No. 2 — November 30th, 2007 at 10:13 am

    Maybe so I’ve not tried, could be some cool things in future :)

  3. Gareth Heyes writes:
    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

  4. Gareth Heyes writes:
    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

  5. 0xdex writes:
    No. 5 — November 30th, 2007 at 1:51 pm

    cool! looks like a new competitor to adobe arised ;-)

  6. Gareth Heyes writes:
    No. 6 — November 30th, 2007 at 2:09 pm

    Oh yeah I’ll bet Adobe are quaking in their boots at my 1fps animations :D lol

    http://www.businessinfo.co.uk/labs/cssanimation/csscale.php
    http://www.businessinfo.co.uk/labs/cssanimation/csscale.phps

  7. kourge writes:
    No. 7 — December 1st, 2007 at 4:05 am

    Nice! Look, ma, no JavaScript!

  8. Kanedaaa writes:
    No. 8 — December 10th, 2007 at 5:19 pm

    With Linux – Opera and Firefox – dosnt work…

  9. CrashPlan.nl online writes:
    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.

«
»