Treehouse: Grow your CSS skills. Land your dream job.

Onload for CSS3 Transitions and Transformations Painful

  • # May 30, 2012 at 7:53 pm

    Just spent a fair chunk of time trying to get CSS3 Transitions to work without Hover, and launch animations on their own. Ouch! Plenty of ideas, many of which came with buggy demos that didn’t really seem to work cross-browser (why post a “solution” that only works in some webkit browsers, some of the time, on your demo), and didn’t degrade gracefully. I kept running into problems as well: Onload transitions triggered by adding a class with jQuery on load or body:hover seem to screw up my previously working transitions on drop down menus.

    I’d strongly recommend not going down that road: It’s quicksand that works sometimes, and doesn’t work others. Opera is particularly unreliable in this regard, and Chrome and Safari didn’t always respond the same way.

    Keyframes solved it all! Yes, they don’t work in as many browsers, but they work when they work – at least in my experience. With the right art (ex: a disc jockey record that spins for webkit and FF and is pretty and static in IE), it degrades beautifully.

    What have you found?

    # May 30, 2012 at 8:12 pm

    Animations are self invoking transitions, so although they aren’t supported quite as well, you should be using animations.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.