Hallelujah! We’re finally getting our two wishes for CSS animations and transitions:
- Animating to and from
display: none;for the sake of enter/exit animations.- Animating to and from the intrinsic size of an element (such as
height: auto;).
Finally! View transitions for multi-page apps (AKA websites) will be landing in Chrome soon—here’s hoping other browsers follow suit. Mozilla are up for it. Apple are, as usual, silent on their intentions.
Nice to see a blog post of mine referenced to show that this is a highly-requested feature. Blogging gets results, folks!
If you, like me, feel that view transitions—especially on multi-page apps—would be a good thing for browsers to prioritise for interoperability, give this issue a thumbs-up.
This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.
This is a very handy tip if you’re adding view transitions to your website!
Some great ideas for view transitionts in here! Also:
If you look at any of the examples on a browser that does not support them, the pages still function just fine. The transitions are an extra that’s layered on top if and when your browser supports them. Another concrete example of progressive enhancement in practice.
I can see myself almost certainly needing to use this clever technique at some point so I’m going to squirrel it away now for future me.
I’m very excited about this proposal for animating transitions between web pages!
I’m less excited about doing it for single page apps, but I get why it’s the simplest place to start.
This builds on Jake’s earlier proposal which I always thought was excellent and much needed. I’m not the only one. Chris agrees.
It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to achieve it.
Amen, Chris, amen!
The danger here is that you might pick a single-page app just for this ability, which is what I mean by having to buy into a site architecture just to achieve this.
This is a really nice introduction to CSS transitions with interactive demos you can tinker with.
This looks like a handy library for managing page transitions on sites that are not single page apps.
I’ve said it before and I’ll say it again, but I really think that this handles 80% of the justification for using a single page app architecture.
A demo of page transition animations by Sarah—she’s written about how she did it. I really like it as an example of progressive enhancement: you can navigate around the site just fine, but with JavaScript you get the smooth transitions as a bonus.
All of this reminds me of Jake’s proposal for navigation transitions in the browser. I honestly think this would solve 80% of the use-cases for single page apps.
I honestly think if browsers implemented this, 80% of client-rendered Single Page Apps could be done as regular good ol’-fashioned websites.
Having to reimplement navigation for a simple transition is a bit much, often leading developers to use large frameworks where they could otherwise be avoided. This proposal provides a low-level way to create transitions while maintaining regular browser navigation.
Beautiful use of CSS transitions and transforms.
Also: CSS is officially the new Flash—”skip intro” is back.
A lovely little selection of loading indicators powered by CSS animations and transitions.
An in-depth look at CSS transitions with some handy tips for improving performance.
Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.
A competitor to Prezi built with HTML, CCS and JavaScript.
Lea documents a whole bunch of CSS animation possibilities.
John tells you everything you need to know about CSS animations and transitions, and then he gives you a tool to help you get started.