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 πŸ˜› The technique works by specifying multiple redirects at different intervals and uses the CSS target property to simulate the animation. Check out the demo πŸ˜€

CSS animation demo

9 Responses to “CSS animation!”

  1. .mario writes:

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


  2. Gareth Heyes writes:

    Maybe so I’ve not tried, could be some cool things in future πŸ™‚

  3. Gareth Heyes writes:

    Here’s an example I posted a while ago, which has more target examples:-


  4. Gareth Heyes writes:

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


  5. 0xdex writes:

    cool! looks like a new competitor to adobe arised πŸ˜‰

  6. Gareth Heyes writes:

    Oh yeah I’ll bet Adobe are quaking in their boots at my 1fps animations πŸ˜€ lol


  7. kourge writes:

    Nice! Look, ma, no JavaScript!

  8. Kanedaaa writes:

    With Linux – Opera and Firefox – dosnt work…

  9. CrashPlan.nl online writes:

    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.