Link tags: transitions

15

sparkline

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.

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.

Here’s the code.

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.

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.