Transition.css - 30+ CSS Animation for TransitionĀ· Loading.io
{{n.message}}

Transition.css

30+ handcrafted css animation dedicated for transition


Download Now

and it's small, only 3kb gzipped!


CSS Transition Effect Pack

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


ldt-power-off
ldt-power-on
ldt-bounce-in
ldt-bounce-out
ldt-jump-in
ldt-jump-out
ldt-zoom-in
ldt-zoom-out
ldt-fade-in
ldt-fade-out
ldt-grow-ltr
ldt-grow-rtl
ldt-grow-ttb
ldt-grow-btt
ldt-flip-v
ldt-flip-h
ldt-slide-left-in
ldt-slide-right-in
ldt-slide-top-in
ldt-slide-bottom-in
ldt-slide-left-out
ldt-slide-right-out
ldt-slide-top-out
ldt-slide-bottom-out
ldt-blur-in
ldt-blur-out
ldt-rush-left-in
ldt-rush-right-in
ldt-throw-in
ldt-fall-in


Download

transition.css is available here:

https://loading.io/css/transition.css

Usage

1. include transition.css:

<link rel="stylesheet" type="text/css" href="transition.css"/>

2. pick an animation from the list above, say, ldt-bounce-in, plus a single ld, as class name:

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

3. and here is the result:



( note: here we also set animation-iteration-count to infinite so you can clearly see the bouncing effect. )





Advanced Control

Transitions from Transition.css could be configured as loading.css. Please refer to loading.css documentation for more details.



Browser Compatibility

Transition.css uses CSS Animation and Transform 2D:











Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »