https://github.com/loadingio/transition.css

css animation for transitional effect
https://github.com/loadingio/transition.css

animation css loading stylus transition

Last synced: 20 days ago
JSON representation

css animation for transitional effect

• Host: GitHub
• URL: https://github.com/loadingio/transition.css
• Owner: loadingio
• License: mit
• Created: 2017-10-06T06:06:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-04-19T06:28:06.000Z (almost 3 years ago)
• Last Synced: 2025-12-08T20:56:49.013Z (about 2 months ago)
• Topics: animation, css, loading, stylus, transition
• Language: LiveScript
• Homepage: https://loading.io/transition/
• Size: 587 KB
• Stars: 64
• Watchers: 5
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# transition.css

![transition.css preview](https://github.com/loadingio/transition.css/blob/master/preview.gif?raw=true)

60+ Handcrafted CSS animations dedicated for transitional effect. Online demo could be found here: [transition.css](https://loading.io/transition/)

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](https://loading.io/animation/icon/) - upload your own image and generate GIF or APNG images with transition.css and loading.css.

 * [Loading.io Animated Icons Library](https://loading.io/icon/) - Customizable, animatable Loading.io's icon library powered by loading.css and transition.css.

 * [Loading Patterns](https://loading.io/pattern/) - Customizable, animatable Loading.io's pattern library powered by loading.css and transition.css.

 * [Animated Text Generator](https://loading.io/animation/text/) - convert your text into GIF / SVG animations.

You can find more about animation generation in [loading.io](https://loading.io/).

## Usage

1. download and include [transition.css](https://github.com/loadingio/transition.css/releases/latest/download/transition.min.css):

```

    

```

You can also use CDN, such as, from jsDelivr:

```

    

```

2. check [transition.css animation gallery](https://loading.io/transition/) for the name of animations you want to use. for example, `ld-bounce-in`.

3. use the name as css class on the element you want to animate:

```

    


```


4. for more information, check out [transition.css animation documentation](https://loading.io/transition/).

## LICENSE

MIT License