Catto-CSS

https://cattocss.com

You can also collaborate with this amazing software, please go to https://github.com/Avalojandro/Work-With-Us-Catto-CSS- for more information.

Documentation

Catto-CSS is divided into 4 types of animations with a simple syntax: Hover, Automatic, Infinity and Scroll Animations.

How to use

Hover, Automatic and Infinity animations

• 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 Animations Section of the Catto Website (Comming Soon)
• Paste the name of the animations 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 of the Catto Website (Comming Soon)
• Finally, paste the name of the animation in the element class

Hover Animations (h-)

The animation is activated when the pointer is over the element

Example:

You have an element <a>Click Here</a> With the hover animation you can place the class h-float in your element, so then your code look like this: <a class="h-float">Click Here</a>

Automatic Animations (a-)

The animation is automatically activated when the site reloads

It is advisable to use automatic animations in the top of your website for a good functionality

Example:

You have an element <span>Hello World</span> With the automatic animation you can place the class a-blink in your element, so then your code look like this: <span class="a-blink">Hello World</span>

Infinity Animations (i-)

The animation is repeated an infinite amount of times

Example:

You have an element <h1>My Title</h1> With the automatic animation you can place the class i-bounce in your element, so then your code look like this: <h1 class="i-bounce">My title</h1>

Scroll Animations (s-o-)

The animation is activated through the browser scroll

Example:

You have an element <img src="./Images/picture.jpg"> With the automatic animation you can place the class s-o-slideFadeLeft in your element, so then your code look like this: <img class="s-o-slideFadeLeft" src="./Images/picture.jpg">