@keyframes fade {
0% {opacity: 0; }
100% {opacity: 1; }


-webkit-animation-name: fade;
-webkit-animation-duration: 1s;

The thing that frustrates me about my above example is that it works as an animation but not as a transition applied specifically to the opacity property (-webkit-transition: opacity 1s linear;). Including one property that is not transitionable in either declaration causes the entire transition to fail, even though I don't want to transition it.

When I began experimenting with transitions I assumed when an element's stage changes all of the non-transitionable properties were changed instantly (essentially on frame 0) and then the transitions were applied (over the course of the specified duration). Not so. But this does appear to be the order of things if you are using an animation rather than a transition. WHY!??!?! I don't know and it makes my head hurt.

As for removing the document from the flow...we can't transition height or scale to remove the document from the flow either, we run into the same problems as display:none.

Additionally, height can't be transitioned from 0 to auto so if I need to element to fill it's natural space that's not an option.

Abhisek said on September 14, 2011

Great tricks. Thanks for sharing.

Ivan said on September 18, 2011

ok nice job man.

Ivan said on September 18, 2011

Nice post, I really like this post style.
Ivan @ souplantation coupons 2011

Adrian said on October 03, 2012

Create Animated Alert Box using MooTools and a lightweight (~4.5kb) Custom JavaScript Dialog Boxes. Welcome, Visitor. Subscribe to our RSS Feed and coniedsr adding this article/site to your favorite social bookmark site if you find it useful. Thank you! | Subscribe to RSS

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.