animate-css · eltonmesquita · May 5, 2020 · Jan 21, 2014 · Jan 21, 2014 · Jan 21, 2014
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,10 +1,6 @@
 ---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
----**Describe the bug** A clear and concise description of what the bug is.
+
+name: Bug report about: Create a report to help us improve title: '' labels: '' assignees: '' ---**Describe the bug** A clear and concise description of what the bug is.
 
 **To Reproduce** Steps to reproduce the behavior:
 

diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,10 +1,6 @@
 ---
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
----**Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+name: Feature request about: Suggest an idea for this project title: '' labels: '' assignees: '' ---**Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
 **Describe the solution you'd like** A clear and concise description of what you want to happen.
 

diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,4 @@
+animate.css
 animate.min.css
-animate.module.css
+animate.compate.css
+docs/dist/animate.min.css
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,7 +1,9 @@
 # Contributing to Animate.css
+
 Thanks for your interest in contributing to Animate.css! Before contributing, please make sure you understand the guidelines provided here. Animate.css is widely used, so it’s important to maintain a high level of quality and to contribute with the interests of the community in mind.
 
 ## Design Guidelines
+
 Animations, like many facets of visual and interaction design, can be highly subjective. Maintaining a consistent library of animations in an active community can be difficult; these design guidelines are designed to help encourage thoughtful criticism of new animations that are proposed for Animate.css.
 
 The animations in Animate.css should follow a few key principles:

diff --git a/README.md b/README.md
@@ -2,12 +2,8 @@
 
 [![GitHub Version](https://img.shields.io/github/release/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Star](https://img.shields.io/github/stars/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![Github Fork](https://img.shields.io/github/forks/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css) [![License](https://img.shields.io/github/license/daneden/animate.css.svg?style=for-the-badge)](https://github.com/daneden/animate.css)
 
-> **We need your help!** animate.css v4 is in the work with lots of improvements and some breaking changes, including CSS custom properties support (aka CSS variables) and classes prefix for a safer use. We need **your feedback**! You can follow the development on the [`dev`](https://github.com/daneden/animate.css/tree/dev) branch and give your feedback on the [issue tracker](https://github.com/daneden/animate.css/issues). **Every feedback is welcome!**
-
 ## _Just-add-water CSS animation_
 
-`animate.css` is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
-
 ## Installation
 
 Install with npm:
@@ -22,239 +18,9 @@ Install with yarn:
 yarn add animate.css
 ```
 
-## Usage
-
-To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animate__animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
-
-```html
-<head>
-  <link rel="stylesheet" href="animate.min.css" />
-</head>
-```
-
-or use a CDN hosted version by [CDNJS](https://cdnjs.com/libraries/animate.css)
-
-```html
-<head>
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
-  />
-</head>
-```
-
-### Animations
-
-To animate an element, add the class `animate__animated` to an element. You can include the class `animate__infinite` for an infinite loop. Finally you need to add one of the following classes to the element (adding the `animate__` prefix before it):
-
-| Class Name           |                     |                     |                      |
-| -------------------- | ------------------- | ------------------- | -------------------- |
-| `bounce`             | `flash`             | `pulse`             | `rubberBand`         |
-| `shake`              | `headShake`         | `swing`             | `tada`               |
-| `wobble`             | `jello`             | `bounceIn`          | `bounceInDown`       |
-| `bounceInLeft`       | `bounceInRight`     | `bounceInUp`        | `bounceOut`          |
-| `bounceOutDown`      | `bounceOutLeft`     | `bounceOutRight`    | `bounceOutUp`        |
-| `fadeIn`             | `fadeInDown`        | `fadeInDownBig`     | `fadeInLeft`         |
-| `fadeInLeftBig`      | `fadeInRight`       | `fadeInRightBig`    | `fadeInUp`           |
-| `fadeInUpBig`        | `fadeOut`           | `fadeOutDown`       | `fadeOutDownBig`     |
-| `fadeOutLeft`        | `fadeOutLeftBig`    | `fadeOutRight`      | `fadeOutRightBig`    |
-| `fadeOutUp`          | `fadeOutUpBig`      | `fadeInTopLeft`     | `fadeInTopRight`     |
-| `fadeInBottomLeft`   | `fadeInBottomRight` | `fadeOutTopLeft`    | `fadeOutTopRight`    |
-| `fadeOutBottomRight` | `fadeOutBottomLeft` | `flipInX`           | `flipInY`            |
-| `flipOutX`           | `flipOutY`          | `lightSpeedIn`      | `lightSpeedOut`      |
-| `rotateIn`           | `rotateInDownLeft`  | `rotateInDownRight` | `rotateInUpLeft`     |
-| `rotateInUpRight`    | `rotateOut`         | `rotateOutDownLeft` | `rotateOutDownRight` |
-| `rotateOutUpLeft`    | `rotateOutUpRight`  | `hinge`             | `jackInTheBox`       |
-| `rollIn`             | `rollOut`           | `zoomIn`            | `zoomInDown`         |
-| `zoomInLeft`         | `zoomInRight`       | `zoomInUp`          | `zoomOut`            |
-| `zoomOutDown`        | `zoomOutLeft`       | `zoomOutRight`      | `zoomOutUp`          |
-| `slideInDown`        | `slideInLeft`       | `slideInRight`      | `slideInUp`          |
-| `slideOutDown`       | `slideOutLeft`      | `slideOutRight`     | `slideOutUp`         |
-| `backInDown`         | `backInLeft`        | `backInRight`       | `backInUp`           |
-| `backOutDown`        | `backOutLeft`       | `backOutRight`      | `backOutUp`          |
-| `heartBeat`          |
-
-Full example:
-
-```html
-<h1 class="animate__animated animate__infinite animate__bounce animate__delay-2s">Example</h1>
-```
-
-[Check out all the animations here!](https://daneden.github.io/animate.css/)
-
-It's possible to change the duration of your animations, add a delay or change the number of times that it plays:
-
-```css
-.yourElement {
-  animation-duration: 3s;
-  animation-delay: 2s;
-  animation-iteration-count: infinite;
-}
-```
-
-## CSS Custom Properties (CSS Variables)
-
-Since version 4, animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay and speed. This makes it easy to change all your animations time contrained properties on the fly. It means that you can have a slowmotion or timelapse effect with an one-liner javascript:
-
-```javascript
-// All animations will take twice the time to acomplish
-document.documentElement.style.setProperty('--animate-duration', '2s');
-
-// All animations will take half the time to acomplish
-document.documentElement.style.setProperty('--animate-duration', '.5s');
-```
-
-It's possible to overwrite the variables with pure CSS too:
-
-```css
-/* This will overide all animations duration */
-:root {
-  --animate-duration: 2s;
-}
-
-/* This will overide only this animation duration */
-.animate__bounce {
-  --animate-duration: 3s;
-}
-```
-
-Even though custom properties are not supported by some older browsers - like IE 10+ - you can use it safely as animate is powered by postcss, providing a proper fallback.
-
-## Usage with Javascript
-
-You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:
-
-```javascript
-const element = document.querySelector('.my-element');
-element.classList.add('animate__animated', 'animate__bounceOutLeft');
-```
-
-You can also detect when an animation ends:
-
-```javascript
-const element = document.querySelector('.my-element');
-element.classList.add('animate__animated', 'animate__bounceOutLeft');
-
-element.addEventListener('animationend', function() {
-  doSomething();
-});
-```
-
-You can use this simple function to add and remove the animations:
-
-```javascript
-function animateCSS(element, animationName, callback) {
-  const node = document.querySelector(element);
-  node.classList.add('animate__animated', animationName);
+## Documentation
 
-  function handleAnimationEnd() {
-    node.classList.remove('animate__animated', animationName);
-    node.removeEventListener('animationend', handleAnimationEnd);
-
-    if (typeof callback === 'function') callback();
-  }
-
-  node.addEventListener('animationend', handleAnimationEnd);
-}
-```
-
-And use it like this:
-
-```javascript
-animateCSS('.my-element', 'animate__bounce');
-
-// or
-animateCSS('.my-element', 'animate__bounce', function() {
-  // Do something after animation
-});
-```
-
-Notice that the examples are using ES6's `const` declaration, dropping support for IE10 and some aging browsers. If you prefer, switch the `const` to `var` declarations and IE10 and some old browsers will get support (they still have to provide [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) support, so do your [research](https://caniuse.com/#feat=classlist)).
-
-## Setting _Delay_ and _Speed_
-
-### Delay Class
-
-It's possible to add delays directly on the element's class attribute, just like this:
-
-```html
-<div class="animate__animated bounce delay-2s">Example</div>
-```
-
-| Class Name          | Delay Time |
-| ------------------- | ---------- |
-| `animate__delay-2s` | `2s`       |
-| `animate__delay-3s` | `3s`       |
-| `animate__delay-4s` | `4s`       |
-| `animate__delay-5s` | `5s`       |
-
-> _**Note**: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code._
-
-### Slow, Slower, Fast, and Faster Class
-
-It's possible to control the speed of the animation by adding these classes, as a sample below:
-
-```html
-<div class="animate__animated animate__bounce animate__faster">Example</div>
-```
-
-| Class Name        | Speed Time |
-| ----------------- | ---------- |
-| `animate__slow`   | `2s`       |
-| `animate__slower` | `3s`       |
-| `animate__fast`   | `800ms`    |
-| `animate__faster` | `500ms`    |
-
-> _**Note**: The `animate__animated` class has a default speed of `1s`. If you need custom duration, add it directly to your own CSS code._
-
-### Loop Class
-
-It's possible to control the iteration count of the animation by adding these classes, like below:
-
-```html
-<div class="animate__animated animate__bounce animate__loop-2">Example</div>
-```
-
-| Class Name        | Iteration Count |
-| ----------------- | --------------- |
-| `animate__loop-1` | `1`             |
-| `animate__loop-2` | `2`             |
-| `animate__loop-3` | `3`             |
-
-> _**Note**: The `animate__loop` class has a default iteration count of `1`. If you need custom iteration count, add it directly to your own CSS code._
-
-## Custom Builds
-
-Animate.css is powered by npm/npx, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS features safely. First of all, you’ll need Node and all other dependencies:
-
-```sh
-cd path/to/animate.css/
-npm install
-```
-
-Next, run `npm start` to compile your custom builds. For example, if you want only some of the “attention seekers”, simply edit the `./source/animate.css` file and keep only the animations `@import` you want to use.
-
-```css
-@import 'attention_seekers/bounce.css';
-@import 'attention_seekers/flash.css';
-@import 'attention_seekers/pulse.css';
-@import 'attention_seekers/rubberBand.css';
-@import 'attention_seekers/shake.css';
-@import 'attention_seekers/headShake.css';
-@import 'attention_seekers/swing.css';
-@import 'attention_seekers/tada.css';
-@import 'attention_seekers/wobble.css';
-@import 'attention_seekers/jello.css';
-@import 'attention_seekers/heartBeat.css';
-```
-
-It's possible to change animate's prefix on your custom build. Just change the `animateConfig`'s `prefix` property and rebuild it with `npm start`:
-
-```json
-"animateConfig": {
-  "prefix": "ani__"
-},
-```
+You can find the Animate.css documentation on the [website](http://daneden.github.io/animate.css).
 
 ## Accessibility
 

diff --git a/animate.compat.css b/animate.compat.css
diff --git a/animate.css b/animate.css
@@ -1,3 +1,4 @@
+
 @charset "UTF-8";
 /*!
  * animate.css - https://daneden.github.io/animate.css/
@@ -9,7 +10,7 @@
 :root {
   --animate-duration: 1s;
   --animate-delay: 1s;
-  --animate-loop: 1;
+  --animate-repeat: 1;
 }
 .animate__animated {
   -webkit-animation-duration: 1s;
@@ -23,23 +24,23 @@
   -webkit-animation-iteration-count: infinite;
   animation-iteration-count: infinite;
 }
-.animate__animated.animate__loop-1 {
+.animate__animated.animate__repeat-1 {
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
-  -webkit-animation-iteration-count: var(--animate-loop);
-  animation-iteration-count: var(--animate-loop);
+  -webkit-animation-iteration-count: var(--animate-repeat);
+  animation-iteration-count: var(--animate-repeat);
 }
-.animate__animated.animate__loop-2 {
+.animate__animated.animate__repeat-2 {
   -webkit-animation-iteration-count: calc(1 * 2);
   animation-iteration-count: calc(1 * 2);
-  -webkit-animation-iteration-count: calc(var(--animate-loop) * 2);
-  animation-iteration-count: calc(var(--animate-loop) * 2);
+  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
+  animation-iteration-count: calc(var(--animate-repeat) * 2);
 }
-.animate__animated.animate__loop-3 {
+.animate__animated.animate__repeat-3 {
   -webkit-animation-iteration-count: calc(1 * 3);
   animation-iteration-count: calc(1 * 3);
-  -webkit-animation-iteration-count: calc(var(--animate-loop) * 3);
-  animation-iteration-count: calc(var(--animate-loop) * 3);
+  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
+  animation-iteration-count: calc(var(--animate-repeat) * 3);
 }
 .animate__animated.animate__delay-1s {
   -webkit-animation-delay: 1s;
@@ -2523,8 +2524,7 @@
 /* Flippers */
 @-webkit-keyframes flip {
   from {
-    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
-      rotate3d(0, 1, 0, -360deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     -webkit-animation-timing-function: ease-out;
     animation-timing-function: ease-out;
@@ -2558,17 +2558,15 @@
   }
 
   to {
-    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
-      rotate3d(0, 1, 0, 0deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
   }
 }
 @keyframes flip {
   from {
-    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
-      rotate3d(0, 1, 0, -360deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
     -webkit-animation-timing-function: ease-out;
     animation-timing-function: ease-out;
@@ -2602,8 +2600,7 @@
   }
 
   to {
-    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
-      rotate3d(0, 1, 0, 0deg);
+    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
     transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
     -webkit-animation-timing-function: ease-in;
     animation-timing-function: ease-in;
@@ -2838,8 +2835,10 @@
   }
 }
 .animate__flipOutY {
-  -webkit-animation-duration: calc(var(--animation-duration) * 0.75);
-  animation-duration: calc(var(--animation-duration) * 0.75);
+  -webkit-animation-duration: calc(1s * 0.75);
+  animation-duration: calc(1s * 0.75);
+  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
+  animation-duration: calc(var(--animate-duration) * 0.75);
   -webkit-backface-visibility: visible !important;
   backface-visibility: visible !important;
   -webkit-animation-name: flipOutY;