You can also collaborate with this amazing software, please go to https://github.com/Avalojandro/Work-With-Us-Catto-CSS- for more information.
Catto-CSS is divided into 4 types of animations with a simple syntax: Hover, Automatic, Infinity and Scroll 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
- 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
The animation is activated when the pointer is over the element
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>
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
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>
The animation is repeated an infinite amount of times
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>
The animation is activated through the browser scroll
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">