:octocat: Drop-in CSS transitions
46 pre-built transitions!
Hands on at Codepen or preview all @ transition.style
Import the CSS and set an attribute on some HTML: try on Codepen
<link rel="stylesheet" href="https://unpkg.com/transition-style">
<div transition-style="in:wipe:up">
👍
</div>
npm i transition-style
@import "transition-style";
import 'transition-style';
https://unpkg.com/transition-style
Individual Category Bundles
https://unpkg.com/transition-style/transition.circles.min.css
https://unpkg.com/transition-style/transition.squares.min.css
https://unpkg.com/transition-style/transition.polygons.min.css
https://unpkg.com/transition-style/transition.wipes.min.css
Import category bundles from NPM too
import "transition-style/transition.circles.min.css"
https://unpkg.com/transition-style/transition.hackpack.min.css
More options, more control, smaller import
by importing only the custom properties and base styles:
Custom properties ship with each
.min.css
as well
Try transition.css on almost any existing site! Just copy 📋 the following, create a new bookmark, and paste in the URL:
javascript:(function(){var a=document.createElement("link");a.rel="stylesheet";a.href="https://unpkg.com/transition-style";document.head.append(a);})();
You can now go to a website and click the bookmark to try it out! Animations automatically run when you manually add classes in dev tools, or run code like this in the console:
$('body').setAttribute('transition-style','in:circle:bottom-right')
Caveat: this bookmarklet doesn't work on websites that have a strict CSP set up.
After transition.css
has been added to your project, add an attribute to an element and watch the magic:
<div transition-style="in:circle:bottom-right">
A transitioned IN element
</div>
<div transition-style="out:wipe:down">
A transitioned OUT element
</div>
if nothing is happening when using the attributes, it's likely
transition.css
has not loaded
@keyframes
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:
.main--state-in {
animation: wipe-in-left;
animation-duration: 2s;
animation-fill-mode: both;
}
Checkout the src to find the names of the @keyframe
animations. They follow a pattern like the attributes, so you should be able to assume what they are with decent accuracy.
Each bundle ships with clearly named custom properties which contain the state and geometry needed to orchestrate custom transitions.
.overrides {
--transition__duration: 1s; /* default: 2.5s */
--transition__easing: ease-in-out; /* default: cubic-bezier(.25, 1, .30, 1) */
--transition__delay: 1s; /* default: 0 */
}
or target a specific transition and override it's defaults:
[transition="in:wipe:up"] {
--transition__duration: 1s;
}
Go off the rails and build your own transitions with these variables. There's even the The Hackpack
which is exclusively the custom props 🤘💀 Here's how you can compose a brand new transition from the custom property primitives:
@keyframes circle-swoop {
from {
clip-path: var(--circle-top-right-out);
}
to {
clip-path: var(--circle-bottom-right-in);
}
}
.--in-custom {
--transition__duration: 1s;
--transition__easing: ease-in-out;
animation-name: circle-swoop;
}
Then, in the HTML:
<div transition-style class="--in-custom">
A custom transitioned element
</div>
The only rule is that you must transition from the same type of shapes
At this point you're using Transition.css to it's maximum. You can reach a huge set of transitions by using the custom properties. Have fun!
Play and experiment with this Codepen
See the svelte
branch.
npm run bundle
concurrently bundles and minifies.