60+ Handcrafted CSS animations dedicated for transitional effect. Online demo could be found here: transition.css
Transition.css also plays a core part in loading.io online animation generation service. You can find some examples here:
- GIF / SVG Animation Generator from Any Image - upload your own image and generate GIF or APNG images with transition.css and loading.css.
- Loading.io Animated Icons Library - Customizable, animatable Loading.io's icon library powered by loading.css and transition.css.
- Loading Patterns - Customizable, animatable Loading.io's pattern library powered by loading.css and transition.css.
- Animated Text Generator - convert your text into GIF / SVG animations.
You can find more about animation generation in loading.io.
- download and include transition.css:
<link rel="stylesheet" type="text/css" href="transition.css"/>
You can also use CDN, such as, from jsDelivr:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/loadingio/transition.css@v2.0.0/dist/transition.min.css"/>
-
check transition.css animation gallery for the name of animations you want to use. for example,
ld-bounce-in. -
use the name as css class on the element you want to animate:
<div class="ld ld-bounce-in"></div>
- for more information, check out transition.css animation documentation.
MIT License