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) →