transition.css: 46 pre-built transitions

Go off the rails and build your own transitions with these variables. You can reach a huge set of transitions by using the custom properties and you can even compose a brand new transition from these custom property primitives.

There are also some individual category bundles, for the different geometrical transitions like circles, squares, polygons and wipes. Each bundle ships with clearly named custom properties which contain the state and geometry needed to orchestrate custom transitions. Each bundle ships with the @keyframes declared, and you can use them as you see fit. You can use these to build your own animations or just hook into the presets in your own way.

After transition.css has been added to your project, add an attribute to an element and watch the magic. Attributes were chosen as the default so there’s no question which transition is active. There can be only 1 at a time. With classes, for example, what happens when multiple “transition in” classes are applied to an element? Transition.css chooses to default with a state machine approach so things like a classname collision doesn’t need solved.



Article Navigation

Most Recent Work

NMFF – Ikdoemeejijook