Minor Updates and Small Fixes (#790)
* Update the devDependencies * Update the gitignore file * Update the version of gulp * Fix the build error in the gulpfile script * Update node version testing for travis * Update the package.json * Fix some errors * Update the devdependencies * Re arrange the .gitignore * Update devdependency to the latest stable version * Add new line at the end of the file * Fix versioning error * Update DevDependencies * Update the version from 3.6.1 into 3.6.2 * Add delays up to 5 seconds * Update the files from 3.6.1 into 3.6.2 * Modify the documentation and add delay option
This commit is contained in:
Waren Gonzaga
Elton Mesquita
parent
da9afc06e8
commit
824484ed03
|
|
@ -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
16
README.md
|
|
@ -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 | | | |
|
||||||
| ----------------- | ------------------ | ------------------- | -------------------- |
|
| ----------------- | ------------------ | ------------------- | -------------------- |
|
||||||
|
|
@ -85,7 +85,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/)
|
||||||
|
|
@ -199,6 +199,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:
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
/*!
|
/*!
|
||||||
* animate.css -http://daneden.me/animate
|
* animate.css -http://daneden.me/animate
|
||||||
* Version - 3.6.0
|
* 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%,
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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
22
package.json
|
|
@ -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}": ["prettier --write", "git add"]
|
"*.{js,json,md,css}": ["prettier --write", "git add"]
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue