Robot
/
animate.css
mirror of https://github.com/animate-css/animate.css.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Format files

This commit is contained in:
Panayiotis Lipiridis 2017-11-16 01:20:46 +02:00
parent 98956e08a5
commit 134e6e55fe
34 changed files with 342 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore Normal file
View File

@ -0,0 +1 @@
animate.min.css

148
README.md
View File

@ -1,5 +1,6 @@
# Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![Build Status](https://travis-ci.org/WarenGonzaga/animate.css.svg?branch=master)](https://travis-ci.org/WarenGonzaga/animate.css) [![devDependencies Status](https://david-dm.org/WarenGonzaga/animate.css/dev-status.svg)](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animate-css/Lobby) # Animate.css [![GitHub release](https://img.shields.io/github/release/daneden/animate.css.svg)](https://github.com/daneden/animate.css/releases) [![Build Status](https://travis-ci.org/WarenGonzaga/animate.css.svg?branch=master)](https://travis-ci.org/WarenGonzaga/animate.css) [![devDependencies Status](https://david-dm.org/WarenGonzaga/animate.css/dev-status.svg)](https://david-dm.org/WarenGonzaga/animate.css?type=dev) [![chat](https://img.shields.io/badge/chat-gitter-green.svg)](https://gitter.im/animate-css/Lobby)
*Just-add-water CSS animation*
_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. `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.
@ -10,6 +11,7 @@ To install via Bower, simply do the following:
```bash ```bash
$ bower install animate.css --save $ bower install animate.css --save
``` ```
or you can install via npm: or you can install via npm:
```bash ```bash
@ -17,65 +19,71 @@ $ npm install animate.css --save
``` ```
## Basic Usage ## Basic Usage
1. Include the stylesheet on your document's `<head>` 1. Include the stylesheet on your document's `<head>`
```html ```html
<head> <head>
<link rel="stylesheet" href="animate.min.css"> <link rel="stylesheet" href="animate.min.css">
</head> </head>
``` ```
Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)):
```html Instead of installing you may use the remote version (hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)):
<head>
<link rel="stylesheet" ```html
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> <head>
<!-- or --> <link rel="stylesheet"
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <!-- or -->
</head> <link rel="stylesheet"
``` href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
You may [generate a SRI hash](https://www.srihash.org/) of that particular version and then use it to ensure the file's integrity; also you can make anonymous requests to CDN by setting the corresponding [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute: </head>
```html ```
<head>
<link rel="stylesheet" You may [generate a SRI hash](https://www.srihash.org/) of that particular version and then use it to ensure the file's integrity; also you can make anonymous requests to CDN by setting the corresponding [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute:
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" ```html
crossorigin="anonymous"> <head>
<!-- or --> <link rel="stylesheet"
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
crossorigin="anonymous"> <!-- or -->
</head> <link rel="stylesheet"
``` href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"
2. Add the class `animated` to the element you want to animate. integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw"
You may also want to include the class `infinite` for an infinite loop. crossorigin="anonymous">
</head>
```
2. Add the class `animated` to the element you want to animate. You may also want to include the class `infinite` for an infinite loop.
3. Finally you need to add one of the following classes: 3. Finally you need to add one of the following classes:
| Class Name | | | | | Class Name | | | |
|--------------------|--------------------|--------------------|--------------------| | ----------------- | ------------------ | ------------------- | -------------------- |
| `bounce` |`flash` |`pulse` |`rubberBand` | | `bounce` | `flash` | `pulse` | `rubberBand` |
| `shake` |`headShake` |`swing` |`tada` | | `shake` | `headShake` | `swing` | `tada` |
| `wobble` |`jello` |`bounceIn` |`bounceInDown` | | `wobble` | `jello` | `bounceIn` | `bounceInDown` |
| `bounceInLeft` |`bounceInRight` |`bounceInUp` |`bounceOut` | | `bounceInLeft` | `bounceInRight` | `bounceInUp` | `bounceOut` |
| `bounceOutDown` |`bounceOutLeft` |`bounceOutRight` |`bounceOutUp` | | `bounceOutDown` | `bounceOutLeft` | `bounceOutRight` | `bounceOutUp` |
| `fadeIn` |`fadeInDown` |`fadeInDownBig` |`fadeInLeft` | | `fadeIn` | `fadeInDown` | `fadeInDownBig` | `fadeInLeft` |
| `fadeInLeftBig` |`fadeInRight` |`fadeInRightBig` |`fadeInUp` | | `fadeInLeftBig` | `fadeInRight` | `fadeInRightBig` | `fadeInUp` |
| `fadeInUpBig` |`fadeOut` |`fadeOutDown` |`fadeOutDownBig` | | `fadeInUpBig` | `fadeOut` | `fadeOutDown` | `fadeOutDownBig` |
| `fadeOutLeft` |`fadeOutLeftBig` |`fadeOutRight` |`fadeOutRightBig` | | `fadeOutLeft` | `fadeOutLeftBig` | `fadeOutRight` | `fadeOutRightBig` |
| `fadeOutUp` |`fadeOutUpBig` |`flipInX` |`flipInY` | | `fadeOutUp` | `fadeOutUpBig` | `flipInX` | `flipInY` |
| `flipOutX` |`flipOutY` |`lightSpeedIn` |`lightSpeedOut` | | `flipOutX` | `flipOutY` | `lightSpeedIn` | `lightSpeedOut` |
| `rotateIn` |`rotateInDownLeft` |`rotateInDownRight` |`rotateInUpLeft` | | `rotateIn` | `rotateInDownLeft` | `rotateInDownRight` | `rotateInUpLeft` |
| `rotateInUpRight` |`rotateOut` |`rotateOutDownLeft` |`rotateOutDownRight` | | `rotateInUpRight` | `rotateOut` | `rotateOutDownLeft` | `rotateOutDownRight` |
| `rotateOutUpLeft` |`rotateOutUpRight` |`hinge` |`jackInTheBox` | | `rotateOutUpLeft` | `rotateOutUpRight` | `hinge` | `jackInTheBox` |
| `rollIn` |`rollOut` |`zoomIn` |`zoomInDown` | | `rollIn` | `rollOut` | `zoomIn` | `zoomInDown` |
| `zoomInLeft` |`zoomInRight` |`zoomInUp` |`zoomOut` | | `zoomInLeft` | `zoomInRight` | `zoomInUp` | `zoomOut` |
| `zoomOutDown` |`zoomOutLeft` |`zoomOutRight` |`zoomOutUp` | | `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
| `slideInDown` |`slideInLeft` |`slideInRight` |`slideInUp` | | `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
| `slideOutDown` |`slideOutLeft` |`slideOutRight` |`slideOutUp` | | `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
Full example: Full example:
```html ```html
<h1 class="animated infinite bounce">Example</h1> <h1 class="animated infinite bounce">Example</h1>
``` ```
@ -83,6 +91,7 @@ Full example:
[Check out all the animations here!](https://daneden.github.io/animate.css/) [Check out all the animations here!](https://daneden.github.io/animate.css/)
## Usage ## Usage
To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super! To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
```html ```html
@ -90,7 +99,9 @@ To use animate.css in your website, simply drop the stylesheet into your documen
<link rel="stylesheet" href="animate.min.css"> <link rel="stylesheet" href="animate.min.css">
</head> </head>
``` ```
or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css) or use the version hosted by [CDNJS](https://cdnjs.com/libraries/animate.css)
```html ```html
<head> <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
@ -117,22 +128,22 @@ $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimat
[View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here. [View a video tutorial](https://www.youtube.com/watch?v=CBQGl6zokMs) on how to use Animate.css with jQuery here.
**Note:** `jQuery.one()` is used when you want to execute the event handler at most *once*. More information [here](http://api.jquery.com/one/). **Note:** `jQuery.one()` is used when you want to execute the event handler at most _once_. More information [here](http://api.jquery.com/one/).
You can also extend jQuery to add a function that does it all for you: You can also extend jQuery to add a function that does it all for you:
```javascript ```javascript
$.fn.extend({ $.fn.extend({
animateCss: function (animationName, callback) { animateCss: function(animationName, callback) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() { this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName); $(this).removeClass('animated ' + animationName);
if (callback) { if (callback) {
callback(); callback();
} }
}); });
return this; return this;
} },
}); });
``` ```
@ -140,8 +151,8 @@ And use it like this:
```javascript ```javascript
$('#yourElement').animateCss('bounce'); $('#yourElement').animateCss('bounce');
or or;
$('#yourElement').animateCss('bounce', function () { $('#yourElement').animateCss('bounce', function() {
// Do somthing after animation // Do somthing after animation
}); });
``` ```
@ -156,9 +167,10 @@ You can change the duration of your animations, add a delay or change the number
} }
``` ```
*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)* _Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_
## Custom Builds ## Custom Builds
Animate.css is powered by [gulp.js](http://gulpjs.com/), and you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies: Animate.css is powered by [gulp.js](http://gulpjs.com/), and you can create custom builds pretty easily. First of all, you’ll need Gulp and all other dependencies:
```sh ```sh
@ -183,7 +195,9 @@ Next, run `gulp` to compile your custom builds. For example, if you want only so
``` ```
## License ## License
Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT) Animate.css is licensed under the MIT license. (http://opensource.org/licenses/MIT)
## Contributing ## Contributing
Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important. Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](http://codepen.io). That last one is important.

1
animate-config.json
View File

@ -1,5 +1,4 @@
{ {
"attention_seekers": { "attention_seekers": {
"bounce": true, "bounce": true,
"flash": true, "flash": true,

192
animate.css vendored
View File

@ -25,27 +25,32 @@
.animated.flipOutY, .animated.flipOutY,
.animated.bounceIn, .animated.bounceIn,
.animated.bounceOut { .animated.bounceOut {
animation-duration: .75s; animation-duration: 0.75s;
} }
@keyframes bounce { @keyframes bounce {
from, 20%, 53%, 80%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20%,
transform: translate3d(0,0,0); 53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
} }
40%, 43% { 40%,
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);
} }
70% { 70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
} }
90% { 90% {
transform: translate3d(0,-4px,0); transform: translate3d(0, -4px, 0);
} }
} }
@ -55,11 +60,14 @@
} }
@keyframes flash { @keyframes flash {
from, 50%, to { from,
50%,
to {
opacity: 1; opacity: 1;
} }
25%, 75% { 25%,
75% {
opacity: 0; opacity: 0;
} }
} }
@ -106,11 +114,11 @@
} }
65% { 65% {
transform: scale3d(.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1);
} }
75% { 75% {
transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, 0.95, 1);
} }
to { to {
@ -123,15 +131,23 @@
} }
@keyframes shake { @keyframes shake {
from, to { from,
to {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
10%, 30%, 50%, 70%, 90% { 10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);
} }
20%, 40%, 60%, 80% { 20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);
} }
} }
@ -203,15 +219,21 @@
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
10%, 20% { 10%,
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
} }
30%, 50%, 70%, 90% { 30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
} }
40%, 60%, 80% { 40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
} }
@ -261,7 +283,9 @@
} }
@keyframes jello { @keyframes jello {
from, 11.1%, to { from,
11.1%,
to {
transform: none; transform: none;
} }
@ -300,13 +324,18 @@
} }
@keyframes bounceIn { @keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
20% { 20% {
@ -314,7 +343,7 @@
} }
40% { 40% {
transform: scale3d(.9, .9, .9); transform: scale3d(0.9, 0.9, 0.9);
} }
60% { 60% {
@ -323,7 +352,7 @@
} }
80% { 80% {
transform: scale3d(.97, .97, .97); transform: scale3d(0.97, 0.97, 0.97);
} }
to { to {
@ -337,8 +366,12 @@
} }
@keyframes bounceInDown { @keyframes bounceInDown {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {
@ -369,8 +402,12 @@
} }
@keyframes bounceInLeft { @keyframes bounceInLeft {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {
@ -401,8 +438,12 @@
} }
@keyframes bounceInRight { @keyframes bounceInRight {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
from { from {
@ -433,8 +474,12 @@
} }
@keyframes bounceInUp { @keyframes bounceInUp {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
from { from {
@ -466,17 +511,18 @@
@keyframes bounceOut { @keyframes bounceOut {
20% { 20% {
transform: scale3d(.9, .9, .9); transform: scale3d(0.9, 0.9, 0.9);
} }
50%, 55% { 50%,
55% {
opacity: 1; opacity: 1;
transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
} }
@ -489,7 +535,8 @@
transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);
} }
40%, 45% { 40%,
45% {
opacity: 1; opacity: 1;
transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);
} }
@ -541,7 +588,8 @@
transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);
} }
40%, 45% { 40%,
45% {
opacity: 1; opacity: 1;
transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0);
} }
@ -849,7 +897,7 @@
} }
80% { 80% {
transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
@ -1197,13 +1245,15 @@
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
20%, 60% { 20%,
60% {
transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left; transform-origin: top left;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
40%, 80% { 40%,
80% {
transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left; transform-origin: top left;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
@ -1283,7 +1333,7 @@
@keyframes zoomIn { @keyframes zoomIn {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
50% { 50% {
@ -1298,14 +1348,14 @@
@keyframes zoomInDown { @keyframes zoomInDown {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }
@ -1316,14 +1366,14 @@
@keyframes zoomInLeft { @keyframes zoomInLeft {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }
@ -1334,14 +1384,14 @@
@keyframes zoomInRight { @keyframes zoomInRight {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }
@ -1352,14 +1402,14 @@
@keyframes zoomInUp { @keyframes zoomInUp {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }
@ -1374,7 +1424,7 @@
50% { 50% {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
to { to {
@ -1389,15 +1439,15 @@
@keyframes zoomOutDown { @keyframes zoomOutDown {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform-origin: center bottom; transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }
@ -1408,12 +1458,12 @@
@keyframes zoomOutLeft { @keyframes zoomOutLeft {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0);
transform-origin: left center; transform-origin: left center;
} }
} }
@ -1425,12 +1475,12 @@
@keyframes zoomOutRight { @keyframes zoomOutRight {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0);
transform-origin: right center; transform-origin: right center;
} }
} }
@ -1442,15 +1492,15 @@
@keyframes zoomOutUp { @keyframes zoomOutUp {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform-origin: center bottom; transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }

8
bower.json
View File

@ -1,11 +1,5 @@
{ {
"name": "animate.css", "name": "animate.css",
"main": "./animate.css", "main": "./animate.css",
"ignore": [ "ignore": [".*", "*.yml", "Gemfile", "Gemfile.lock", "*.md"]
".*",
"*.yml",
"Gemfile",
"Gemfile.lock",
"*.md"
]
} }

31
gulpfile.js
View File

@ -25,11 +25,11 @@ var opts = {
autoprefixer: { autoprefixer: {
browsers: ['> 1%, last 2 versions, Firefox ESR'], browsers: ['> 1%, last 2 versions, Firefox ESR'],
cascade: false cascade: false,
}, },
minRename: { minRename: {
suffix: '.min' suffix: '.min',
}, },
banner: [ banner: [
@ -40,8 +40,8 @@ var opts = {
' * Licensed under the MIT license - http://opensource.org/licenses/MIT', ' * Licensed under the MIT license - http://opensource.org/licenses/MIT',
' *', ' *',
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>', ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
' */\n\n' ' */\n\n',
].join('\n') ].join('\n'),
}; };
// ---------------------------- // ----------------------------
@ -53,21 +53,19 @@ gulp.task('default', function() {
}); });
gulp.task('createCSS', function() { gulp.task('createCSS', function() {
return gulp.src(activatedAnimations) return gulp
.src(activatedAnimations)
.pipe(concat(opts.concatName)) .pipe(concat(opts.concatName))
.pipe(postcss([ .pipe(postcss([autoprefixer(opts.autoprefixer)]))
autoprefixer(opts.autoprefixer)
]))
.pipe(gulp.dest(opts.destPath)) .pipe(gulp.dest(opts.destPath))
.pipe(postcss([ .pipe(postcss([cssnano({reduceIdents: {keyframes: false}})]))
cssnano({reduceIdents: {keyframes: false}})
]))
.pipe(rename(opts.minRename)) .pipe(rename(opts.minRename))
.pipe(gulp.dest(opts.destPath)); .pipe(gulp.dest(opts.destPath));
}); });
gulp.task('addHeader', function() { gulp.task('addHeader', function() {
return gulp.src('*.css') return gulp
.src('*.css')
.pipe(header(opts.banner, pkg)) .pipe(header(opts.banner, pkg))
.pipe(gulp.dest(opts.destPath)); .pipe(gulp.dest(opts.destPath));
}); });
@ -79,8 +77,10 @@ gulp.task('addHeader', function() {
// Read the config file and return an array of the animations to be activated // Read the config file and return an array of the animations to be activated
function activateAnimations() { function activateAnimations() {
var categories = JSON.parse(fs.readFileSync('animate-config.json')), var categories = JSON.parse(fs.readFileSync('animate-config.json')),
category, files, file, category,
target = [ 'source/_base.css' ], files,
file,
target = ['source/_base.css'],
count = 0; count = 0;
for (category in categories) { for (category in categories) {
@ -88,7 +88,8 @@ function activateAnimations() {
files = categories[category]; files = categories[category];
for (file in files) { for (file in files) {
if (files[file]) { // marked as true if (files[file]) {
// marked as true
target.push('source/' + category + '/' + file + '.css'); target.push('source/' + category + '/' + file + '.css');
count += 1; count += 1;
} }

4
package.json
View File

@ -37,14 +37,14 @@
}, },
"prettier": { "prettier": {
"bracketSpacing": false, "bracketSpacing": false,
"printWidth": 80, "printWidth": 120,
"proseWrap": false, "proseWrap": false,
"singleQuote": true, "singleQuote": true,
"tabWidth": 2, "tabWidth": 2,
"trailingComma": "all" "trailingComma": "all"
}, },
"scripts": { "scripts": {
"fix": "prettier --ignore-path .gitignore --write '**/*.{js,json,md,css}'", "fix": "prettier --ignore-path .gitignore --write \"**/*.{js,json,md,css}\"",
"precommit": "lint-staged" "precommit": "lint-staged"
}, },
"spm": { "spm": {

2
source/_base.css
View File

@ -15,5 +15,5 @@
.animated.flipOutY, .animated.flipOutY,
.animated.bounceIn, .animated.bounceIn,
.animated.bounceOut { .animated.bounceOut {
animation-duration: .75s; animation-duration: 0.75s;
} }

17
source/attention_seekers/bounce.css
View File

@ -1,16 +1,21 @@
@keyframes bounce { @keyframes bounce {
from, 20%, 53%, 80%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20%,
transform: translate3d(0,0,0); 53%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
} }
40%, 43% { 40%,
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0);
} }
70% { 70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0);
} }

7
source/attention_seekers/flash.css
View File

@ -1,9 +1,12 @@
@keyframes flash { @keyframes flash {
from, 50%, to { from,
50%,
to {
opacity: 1; opacity: 1;
} }
25%, 75% { 25%,
75% {
opacity: 0; opacity: 0;
} }
} }

4
source/attention_seekers/jello.css
View File

@ -1,5 +1,7 @@
@keyframes jello { @keyframes jello {
from, 11.1%, to { from,
11.1%,
to {
transform: none; transform: none;
} }

4
source/attention_seekers/rubberBand.css
View File

@ -16,11 +16,11 @@
} }
65% { 65% {
transform: scale3d(.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1);
} }
75% { 75% {
transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, 0.95, 1);
} }
to { to {

14
source/attention_seekers/shake.css
View File

@ -1,13 +1,21 @@
@keyframes shake { @keyframes shake {
from, to { from,
to {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
10%, 30%, 50%, 70%, 90% { 10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);
} }
20%, 40%, 60%, 80% { 20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0);
} }
} }

14
source/attention_seekers/tada.css
View File

@ -3,15 +3,21 @@
transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
} }
10%, 20% { 10%,
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); 20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
} }
30%, 50%, 70%, 90% { 30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
} }
40%, 60%, 80% { 40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
} }

15
source/bouncing_entrances/bounceIn.css
View File

@ -1,11 +1,16 @@
@keyframes bounceIn { @keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
20% { 20% {
@ -13,7 +18,7 @@
} }
40% { 40% {
transform: scale3d(.9, .9, .9); transform: scale3d(0.9, 0.9, 0.9);
} }
60% { 60% {
@ -22,7 +27,7 @@
} }
80% { 80% {
transform: scale3d(.97, .97, .97); transform: scale3d(0.97, 0.97, 0.97);
} }
to { to {

8
source/bouncing_entrances/bounceInDown.css
View File

@ -1,6 +1,10 @@
@keyframes bounceInDown { @keyframes bounceInDown {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {

8
source/bouncing_entrances/bounceInLeft.css
View File

@ -1,6 +1,10 @@
@keyframes bounceInLeft { @keyframes bounceInLeft {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
0% { 0% {

8
source/bouncing_entrances/bounceInRight.css
View File

@ -1,6 +1,10 @@
@keyframes bounceInRight { @keyframes bounceInRight {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
from { from {

8
source/bouncing_entrances/bounceInUp.css
View File

@ -1,6 +1,10 @@
@keyframes bounceInUp { @keyframes bounceInUp {
from, 60%, 75%, 90%, to { from,
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
from { from {

7
source/bouncing_exits/bounceOut.css
View File

@ -1,16 +1,17 @@
@keyframes bounceOut { @keyframes bounceOut {
20% { 20% {
transform: scale3d(.9, .9, .9); transform: scale3d(0.9, 0.9, 0.9);
} }
50%, 55% { 50%,
55% {
opacity: 1; opacity: 1;
transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
} }

3
source/bouncing_exits/bounceOutDown.css
View File

@ -3,7 +3,8 @@
transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);
} }
40%, 45% { 40%,
45% {
opacity: 1; opacity: 1;
transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0);
} }

3
source/bouncing_exits/bounceOutUp.css
View File

@ -3,7 +3,8 @@
transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);
} }
40%, 45% { 40%,
45% {
opacity: 1; opacity: 1;
transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0);
} }

2
source/flippers/flip.css
View File

@ -15,7 +15,7 @@
} }
80% { 80% {
transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }

6
source/specials/hinge.css
View File

@ -4,13 +4,15 @@
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
20%, 60% { 20%,
60% {
transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left; transform-origin: top left;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
40%, 80% { 40%,
80% {
transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left; transform-origin: top left;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;

2
source/zooming_entrances/zoomIn.css
View File

@ -1,7 +1,7 @@
@keyframes zoomIn { @keyframes zoomIn {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
50% { 50% {

8
source/zooming_entrances/zoomInDown.css
View File

@ -1,14 +1,14 @@
@keyframes zoomInDown { @keyframes zoomInDown {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }

8
source/zooming_entrances/zoomInLeft.css
View File

@ -1,14 +1,14 @@
@keyframes zoomInLeft { @keyframes zoomInLeft {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }

8
source/zooming_entrances/zoomInRight.css
View File

@ -1,14 +1,14 @@
@keyframes zoomInRight { @keyframes zoomInRight {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }

8
source/zooming_entrances/zoomInUp.css
View File

@ -1,14 +1,14 @@
@keyframes zoomInUp { @keyframes zoomInUp {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
60% { 60% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }

2
source/zooming_exits/zoomOut.css
View File

@ -5,7 +5,7 @@
50% { 50% {
opacity: 0; opacity: 0;
transform: scale3d(.3, .3, .3); transform: scale3d(0.3, 0.3, 0.3);
} }
to { to {

8
source/zooming_exits/zoomOutDown.css
View File

@ -1,15 +1,15 @@
@keyframes zoomOutDown { @keyframes zoomOutDown {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform-origin: center bottom; transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }

4
source/zooming_exits/zoomOutLeft.css
View File

@ -1,12 +1,12 @@
@keyframes zoomOutLeft { @keyframes zoomOutLeft {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0);
transform-origin: left center; transform-origin: left center;
} }
} }

4
source/zooming_exits/zoomOutRight.css
View File

@ -1,12 +1,12 @@
@keyframes zoomOutRight { @keyframes zoomOutRight {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0);
transform-origin: right center; transform-origin: right center;
} }
} }

8
source/zooming_exits/zoomOutUp.css
View File

@ -1,15 +1,15 @@
@keyframes zoomOutUp { @keyframes zoomOutUp {
40% { 40% {
opacity: 1; opacity: 1;
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
} }
to { to {
opacity: 0; opacity: 0;
transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform-origin: center bottom; transform-origin: center bottom;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
} }
} }