Catto-CSS

Animate your website with Catto-CSS
See the animations Download v.3.20

A compatible library
Catto-CSS has a syntax compatible with any framework

Simple syntax
Catto-CSS uses a simple syntax for four types of animations:

✔ Hover animations (h-)
✔ Automatic animations (a-)
✔ Infinity animations (i-)
✔ Scroll animations (s-o-)

Hover (h-)
<a class="h-float"> Hello World! </a>
The animation is activated when the pointer is over the element

Automatic (a-)
<a class="a-blink"> Hello World! </a>
The animation only happens once when the site reloads

Infinity (i-)
<a class="i-bounce"> Hello World! </a>
The animation is repeated an infinite amount of times

Scroll (s-o-)
<a class="s-o-surprise"> Hello World! </a>
The animation is activated with the scroll of the browser

How to use?

Download Catto-CSS
Include catto.css at the head of your file
Make a class in the element that you want animate
Select and copy the class in the animation section
Paste the name of the animation in the element class

Scroll animations

Download Catto-CSS
Include catto.css at the head of your file
Include the JQuery CDN in the end of your file
Next, download the waypoints in http://imakewebthings.com/waypoints/
Include the jquery.waypoints.js under the JQuery CDN
Then, include the scrollcat.js under the jquery.waypoints.js
Select and copy the class in the Animations Section
Finally, paste the name of the animation in the element class

New versions
Catto-CSS is updated every month by adding new animations for greater variety.
You can also collaborate in GitHub by creating your own animations by clicking here and following the instructions

Sponsors of this proyect

BECOME A PATRON