CSS Quick Tip: Animating in a newly added element | Stephanie Eckles
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.
Link tags: transitions
15
WICG/shared-element-transitions
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.
Still Hoping for Better Native Page Transitions | CSS-Tricks
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.
CSS transitions and hover animations, an interactive guide
This is a really nice introduction to CSS transitions with interactive demos you can tinker with.
Meet swup
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.
page-transitions-travelapp
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.
jakearchibald/navigation-transitions
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.
In Pieces - 30 Endangered Species, 30 Pieces.
Beautiful use of CSS transitions and transforms.
Also: CSS is officially the new Flash—”skip intro” is back.
Single Element CSS Spinners
A lovely little selection of loading indicators powered by CSS animations and transitions.
All you need to know about CSS Transitions | Alex MacCaw
An in-depth look at CSS transitions with some handy tips for improving performance.
Untitled ✿ dabblet.com
Here’s a handy little tip for CSS animations: instead of changing position properties, use translate instead.
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz
A competitor to Prezi built with HTML, CCS and JavaScript.
Animatable: One property, two values, endless possiblities
Lea documents a whole bunch of CSS animation possibilities.
Let the Web move you-CSS3 Animations and Transitions | Web Directions
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.
Madmanimation
Andy just debuted this at An Event Apart—lovely stuff.