CSS animation!

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

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Slashdot
  • StumbleUpon

Comments 8

  1. .mario wrote:

    Hehe - cool. Is it possible to work with counter-increment and position absolute on hover?

    Greetings,
    .mario

    Posted 30 Nov 2007 at 10:02 am
  2. Gareth Heyes wrote:

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

    Posted 30 Nov 2007 at 10:13 am
  3. Gareth Heyes wrote:

    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

    Posted 30 Nov 2007 at 10:42 am
  4. Gareth Heyes wrote:

    A loop can easily be created by specifying more redirects:-

    http://www.businessinfo.co.uk/labs/cssanimation/cssloop.php

    Posted 30 Nov 2007 at 11:25 am
  5. 0xdex wrote:

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

    Posted 30 Nov 2007 at 1:51 pm
  6. Gareth Heyes wrote:

    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

    Posted 30 Nov 2007 at 2:09 pm
  7. kourge wrote:

    Nice! Look, ma, no JavaScript!

    Posted 01 Dec 2007 at 4:05 am
  8. Kanedaaa wrote:

    With Linux - Opera and Firefox - dosnt work…

    Posted 10 Dec 2007 at 5:19 pm

Post a Comment

Your email is never published nor shared. Required fields are marked *

Comment spam protected by SpamBam