Format files
This commit is contained in:
parent
98956e08a5
commit
134e6e55fe
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
@ -0,0 +1 @@
|
||||||
|
animate.min.css
|
148
README.md
148
README.md
|
@ -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,5 +1,4 @@
|
||||||
{
|
{
|
||||||
|
|
||||||
"attention_seekers": {
|
"attention_seekers": {
|
||||||
"bounce": true,
|
"bounce": true,
|
||||||
"flash": true,
|
"flash": true,
|
||||||
|
|
192
animate.css
vendored
192
animate.css
vendored
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
31
gulpfile.js
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -15,5 +15,5 @@
|
||||||
.animated.flipOutY,
|
.animated.flipOutY,
|
||||||
.animated.bounceIn,
|
.animated.bounceIn,
|
||||||
.animated.bounceOut {
|
.animated.bounceOut {
|
||||||
animation-duration: .75s;
|
animation-duration: 0.75s;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
@keyframes jello {
|
@keyframes jello {
|
||||||
from, 11.1%, to {
|
from,
|
||||||
|
11.1%,
|
||||||
|
to {
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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% {
|
||||||
|
|
|
@ -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% {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,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,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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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% {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue