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 animation-iteration-count
to 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 suggestion? Feel free to leave comment here. :)
transition.css could also be used on popup dialogs.
You can config ldcover
to popup dialogs with transition effect with animation
option.
For example, to apply a blur in animation, simpliy initialize the ldcover object with animation
option set to "ld ld-blur-in
".
For more information about ldcover, please check ldcover documentation.
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.