Avalojandro / Catto-CSS

Library of CSS animations easy and quick to use

Home Page:https://cattocss.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ForTheBadge uses-css ForTheBadge uses-js
MIT license VERSION OPEN SOURCE Website shields.io Website shields.io
Website shields.io

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">

ForTheBadge built-by-developers
Join the chat at https://gitter.im/Catto-CSS/community