https://github.com/rod/animations.css
CSS3 Animation Cheat Sheet
https://github.com/rod/animations.css
animation css
Last synced: 5 months ago
JSON representation
CSS3 Animation Cheat Sheet
- Host: GitHub
- URL: https://github.com/rod/animations.css
- Owner: rod
- License: mit
- Created: 2016-11-14T22:42:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-17T13:40:28.000Z (over 9 years ago)
- Last Synced: 2026-02-09T19:59:55.350Z (6 months ago)
- Topics: animation, css
- Language: CSS
- Homepage: http://www.justinaguilar.com/animations/
- Size: 29.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# animations.css []()
> CSS3 Animation Cheat Sheet
## Installation
Install via Bower
```bash
bower install --save-dev animations.css
```
Install via npm
```bash
npm install --save-dev animations.css
```
Install via yarn
```bash
yarn add --dev animations.css
```
## Basic Usage
Add the stylesheet to the `` element
```html
```
Add one of the following animation classes to the element that you want to animate:
- entrance
- `slideUp`, `slideDown`, `slideLeft`, `slideRight`, `slideExpand`, `expandUp`, `fadeIn`, `expandOpen`, `bigEntrance`, `hatch`
- misc
- `bounce`, `pulse`, `floating`, `tossing`, `pullUp`, `pullDown`, `stretchLeft`, `stretchRight`
For example:
```html
...
```
When using entrance animations, you need to apply a `visibility: hidden` property to the animated element to hide it before the animation is activated.
The values for these animations are relative to the element's size. That means bigger images have more exaggerated animations and smaller images have more subtle animations.
## Usage
By default, these animations will trigger on page load, which means animations further down the page may not be seen. Luckily, there are many ways you can [activate the animations on scroll](http://www.justinaguilar.com/animations/scrolling.html).
To apply the `slideUp` animation to an element with an id of `myElement` when it is `400px` from the top of the browser window you could use the following:
```html
$(window).scroll(function() {
$('#myElement').each(function(){
var elementPosition = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (elementPosition < topOfWindow + 400) {
$(this).addClass("slideUp");
}
});
});
```
To make `#myElement` `bounce` when clicked you could use the following:
```html
$('#myElement').click(function() {
$(this).addClass("bounce");
});
```
## License
MIT © [Rodney Dennis](https://github.com/rod)