Transition.css

60+ handcrafted css animation dedicated for transition


Download NowGithub Repo Make GIF

and it's small, only 6KB gzipped!

CSS Transition Effect Pack

simple to use by just adding a CSS class from transition.css

Click Them to Apply on Popups!
blur-in
blur-out
bounce-alt-in
bounce-alt-out
bounce-in
bounce-out
fade-in
fade-out
fall-btt-in
fall-ltr-in
fall-rtl-in
fall-ttb-in
flip-h-in
flip-h-out
flip-v-in
flip-v-out
float-btt-in
float-btt-out
float-ltr-in
float-ltr-out
float-rtl-in
float-rtl-out
float-ttb-in
float-ttb-out
grow-btt-in
grow-btt-out
grow-ltr-in
grow-ltr-out
grow-rtl-in
grow-rtl-out
grow-ttb-in
grow-ttb-out
jump-alt-in
jump-alt-out
jump-in
jump-out
power-off
power-on
rush-btt-in
rush-ltr-in
rush-rtl-in
rush-ttb-in
slide-btt-in
slide-btt-out
slide-ltr-in
slide-ltr-out
slide-rtl-in
slide-rtl-out
slide-ttb-in
slide-ttb-out
spring-btt-in
spring-ltr-in
spring-rtl-in
spring-ttb-in
throw-btt-in
throw-ltr-in
throw-rtl-in
throw-ttb-in
vortex-alt-in
vortex-alt-out
vortex-in
vortex-out
zoom-in
zoom-out

Download

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:

npm i @loadingio/transition.css

Usage

1. Include transition.css:

<link rel="stylesheet" type="text/css" href="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:

<img src="f.svg" class="ld ld-bounce-in" />
sample
Run Again

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:

<img src="f.svg" class="ld ld-bounce-in infinite" />
sample

Advanced Control

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.

Browser Compatibility

Transition.css uses CSS Animation and Transform 2D:

Comments

Any questions or suggestion? Feel free to leave comment here. :)

Load Comments

Hello, Transition.css

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.


Close This Popup
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO