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
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
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
|
||||
|
||||
1. Include the stylesheet on your document's `<head>`
|
||||
1. Include the stylesheet on your document's `<head>`
|
||||
|
||||
```html
|
||||
<head>
|
||||
|
|
@ -56,9 +56,9 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
|
|||
</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 | | | |
|
||||
| ----------------- | ------------------ | ------------------- | -------------------- |
|
||||
|
|
@ -85,7 +85,7 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
|
|||
Full example:
|
||||
|
||||
```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/)
|
||||
|
|
@ -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)_
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
* Version - 3.6.0
|
||||
* Version - 3.6.2
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Copyright (c) 2018 Daniel Eden
|
||||
|
|
@ -20,6 +20,31 @@
|
|||
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 {
|
||||
from,
|
||||
20%,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -25,11 +25,11 @@ var opts = {
|
|||
|
||||
autoprefixer: {
|
||||
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
|
||||
cascade: false,
|
||||
cascade: false
|
||||
},
|
||||
|
||||
minRename: {
|
||||
suffix: '.min',
|
||||
suffix: '.min'
|
||||
},
|
||||
|
||||
banner: [
|
||||
|
|
@ -41,7 +41,7 @@ var opts = {
|
|||
' *',
|
||||
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
|
||||
' */\n\n',
|
||||
].join('\n'),
|
||||
].join('\n')
|
||||
};
|
||||
|
||||
// ----------------------------
|
||||
|
|
|
|||
22
package.json
22
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "animate.css",
|
||||
"version": "3.6.1",
|
||||
"version": "3.6.2",
|
||||
"main": "animate.css",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -20,19 +20,19 @@
|
|||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.6",
|
||||
"cssnano": "^3.5.1",
|
||||
"eslint": "^4.11.0",
|
||||
"autoprefixer": "^8.0.0",
|
||||
"cssnano": "^3.10.0",
|
||||
"eslint": "^4.18.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-concat": "^2.6.0",
|
||||
"gulp-header": "^1.7.1",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-header": "^2.0.1",
|
||||
"gulp-postcss": "^7.0.1",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-util": "^3.0.7",
|
||||
"gulp-util": "^3.0.8",
|
||||
"husky": "^0.14.3",
|
||||
"lint-staged": "^6.0.0",
|
||||
"prettier": "^1.9.1",
|
||||
"run-sequence": "^2.2.0"
|
||||
"lint-staged": "^7.0.0",
|
||||
"prettier": "^1.10.2",
|
||||
"run-sequence": "^2.2.1"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,json,md,css}": ["prettier --write", "git add"]
|
||||
|
|
|
|||
|
|
@ -6,3 +6,23 @@
|
|||
.animated.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