Drop-in CSS transitions with transition.css

transition.css is a handy stylesheet by Adam Argyle, full of transitions you can apply on your page. Simply import the stylesheet and set a transition-style attribute on the elements you wish to animate for the effect to kick in:

<link rel="stylesheet" href="https://unpkg.com/transition-style" />
<div transition-style="in:wipe:up">👍</div>

Not explicitly mentioned on the demo page (but is in the docs) is that you can tweak the delay using the --transition__delay Custom Property. Custom Transitions also possible!

transition.css →
transition.css Source (GitHub) →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.