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

Merge branch 'master' into master

This commit is contained in:
James George 2018-07-21 20:38:29 +05:30 committed by GitHub
parent 502a2805e6 de6b531570
commit fe18e0f552
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 123 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored
View File

@ -1,8 +1,8 @@
.db
.DS_Store
.idea
.ini
.log
.sass-cache .sass-cache
node_modules/ node_modules/
npm-debug.log
test/ test/
.idea
.DS_Store
Thumbs.db
Desktop.ini

16
README.md
View File

@ -20,7 +20,7 @@ $ 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>
@ -56,9 +56,9 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
</head> </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. 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 | | | |
| ----------------- | ------------------ | ------------------- | -------------------- | | ----------------- | ------------------ | ------------------- | -------------------- |
@ -86,7 +86,7 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
Full example: Full example:
```html ```html
<h1 class="animated infinite bounce">Example</h1> <h1 class="animated infinite bounce delay-2s">Example</h1>
``` ```
[Check out all the animations here!](https://daneden.github.io/animate.css/) [Check out all the animations here!](https://daneden.github.io/animate.css/)
@ -200,6 +200,14 @@ 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)_
You can also add delays directly on the element's class attribute, just like this:
```html
<div class="animated bounce delay-2s">Example</div>
```
_Note: the default delays are from 1 seconds to 5 seconds only. If you want to add customized delays, you can add it directly to your css_
## 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:

87
animate.css vendored
View File

@ -2,7 +2,7 @@
/*! /*!
* animate.css -http://daneden.me/animate * animate.css -http://daneden.me/animate
* Version - 3.6.1 * Version - 3.6.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT * Licensed under the MIT license - http://opensource.org/licenses/MIT
* *
* Copyright (c) 2018 Daniel Eden * Copyright (c) 2018 Daniel Eden
@ -20,6 +20,31 @@
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
@-webkit-keyframes bounce { @-webkit-keyframes bounce {
from, from,
20%, 20%,
@ -1913,36 +1938,44 @@
@-webkit-keyframes flip { @-webkit-keyframes flip {
from { from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 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; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
transform: perspective(400px) scale3d(0.95, 0.95, 0.95); rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
to { to {
-webkit-transform: perspective(400px); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
transform: perspective(400px); 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; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
@ -1950,36 +1983,44 @@
@keyframes flip { @keyframes flip {
from { from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); 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; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
transform: perspective(400px) scale3d(0.95, 0.95, 0.95); rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
to { to {
-webkit-transform: perspective(400px); -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
transform: perspective(400px); 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; -webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
@ -2248,13 +2289,11 @@
80% { 80% {
-webkit-transform: skewX(-5deg); -webkit-transform: skewX(-5deg);
transform: skewX(-5deg); transform: skewX(-5deg);
opacity: 1;
} }
to { to {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity: 1;
} }
} }
@ -2274,13 +2313,11 @@
80% { 80% {
-webkit-transform: skewX(-5deg); -webkit-transform: skewX(-5deg);
transform: skewX(-5deg); transform: skewX(-5deg);
opacity: 1;
} }
to { to {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity: 1;
} }
} }

4
animate.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
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: [
@ -41,7 +41,7 @@ var opts = {
' *', ' *',
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>', ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
' */\n\n', ' */\n\n',
].join('\n'), ].join('\n')
}; };
// ---------------------------- // ----------------------------

22
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "animate.css", "name": "animate.css",
"version": "3.6.1", "version": "3.6.2",
"main": "animate.css", "main": "animate.css",
"repository": { "repository": {
"type": "git", "type": "git",
@ -20,19 +20,19 @@
} }
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.6", "autoprefixer": "^8.0.0",
"cssnano": "^3.5.1", "cssnano": "^3.10.0",
"eslint": "^4.11.0", "eslint": "^4.18.0",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-concat": "^2.6.0", "gulp-concat": "^2.6.1",
"gulp-header": "^1.7.1", "gulp-header": "^2.0.1",
"gulp-postcss": "^7.0.0", "gulp-postcss": "^7.0.1",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7", "gulp-util": "^3.0.8",
"husky": "^0.14.3", "husky": "^0.14.3",
"lint-staged": "^6.0.0", "lint-staged": "^7.0.0",
"prettier": "^1.9.1", "prettier": "^1.10.2",
"run-sequence": "^2.2.0" "run-sequence": "^2.2.1"
}, },
"lint-staged": { "lint-staged": {
"*.{js,json,md,css}": [ "*.{js,json,md,css}": [

20
source/_base.css
View File

@ -6,3 +6,23 @@
.animated.infinite { .animated.infinite {
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
.animated.delay-1s {
animation-delay: 1s;
}
.animated.delay-2s {
animation-delay: 2s;
}
.animated.delay-3s {
animation-delay: 3s;
}
.animated.delay-4s {
animation-delay: 4s;
}
.animated.delay-5s {
animation-delay: 5s;
}

13
source/flippers/flip.css
View File

@ -1,26 +1,29 @@
@keyframes flip { @keyframes flip {
from { from {
transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
40% { 40% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out; animation-timing-function: ease-out;
} }
50% { 50% {
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
80% { 80% {
transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
to { to {
transform: perspective(400px); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in; animation-timing-function: ease-in;
} }
} }

2
source/lightspeed/lightSpeedIn.css
View File

@ -11,12 +11,10 @@
80% { 80% {
transform: skewX(-5deg); transform: skewX(-5deg);
opacity: 1;
} }
to { to {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
opacity: 1;
} }
} }