60+ handcrafted css animation dedicated for transition
simple to use by just adding a CSS class from transition.css
transition.css is available for downloading in its Github Repo. Or, you can get it directly here:
You could also use transition.css directly via CDN like jsDelivr:
Or, you can download it via npm:
1. Include transition.css:
2. Pick an transitional animation from the list above, say,
bounce-in. Next, prefix it with
ld- plus another
ld class as class name and add it on the target HTML element:
You probably didn't see the transition effect of the above example unless you click the 'Run Again' button, this is because the transition fired only once when you open the page. To loop the transition indefinitely, you can set
infinite, or simply use
infinite class provided by transition.css:
You can control the animation speed, animation direction and animation play state of transitions from Transition.css in the same way of configuring in loading.css with loading.css included. Please refer to loading.css documentation for more details.
Transition.css uses CSS Animation and Transform 2D:
Any questions or suggestions? Feel free to leave your comment below :)
transition.css could also be used on popup dialogs.
You can config
ldCover to popup dialogs with transition effect with
For example, to apply a blur in animation, simpliy initialize the ldCover object with
animation option set to "
For more information about ldCover, please check ldCover documentation.
You might have signed up with another email / password before. please try:
Download after paying or upgrading to Pro with your loading.io account.
You are downloading free license item. Sign in to proceed.
Save your works, design and share with others by logging in loading.io.
Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 VAT No. 52518929
Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.