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 […]

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


Print Share Comment Cite Upload Translate
APA
Bramus! | Sciencx (2024-03-29T09:39:55+00:00) » Drop-in CSS transitions with transition.css. Retrieved from https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/.
MLA
" » Drop-in CSS transitions with transition.css." Bramus! | Sciencx - Saturday March 6, 2021, https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/
HARVARD
Bramus! | Sciencx Saturday March 6, 2021 » Drop-in CSS transitions with transition.css., viewed 2024-03-29T09:39:55+00:00,<https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/>
VANCOUVER
Bramus! | Sciencx - » Drop-in CSS transitions with transition.css. [Internet]. [Accessed 2024-03-29T09:39:55+00:00]. Available from: https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/
CHICAGO
" » Drop-in CSS transitions with transition.css." Bramus! | Sciencx - Accessed 2024-03-29T09:39:55+00:00. https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/
IEEE
" » Drop-in CSS transitions with transition.css." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/. [Accessed: 2024-03-29T09:39:55+00:00]
rf:citation
» Drop-in CSS transitions with transition.css | Bramus! | Sciencx | https://www.scien.cx/2021/03/06/drop-in-css-transitions-with-transition-css/ | 2024-03-29T09:39:55+00:00
https://github.com/addpipe/simple-recorderjs-demo