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:

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"
/>

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"
/>

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:

IE <= 9 and Opera mini don't support CSS Animation and Transform 2D.
Supported but buggy for Android Browser <= 3.
it works well for all other modern browsers.

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

Transition.css