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


This content originally appeared on Bram.us and was authored by Bramus!

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


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-03-06T22:14:38+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts