mirror of
https://github.com/animate-css/animate.css.git
synced 2024-09-28 22:11:31 +02:00
Add new animation speed & delay classes
3.7.0 New Feature: Animation speed & delay classes, dependency updates
This commit is contained in:
parent
1514f932a9
commit
be8582afbb
@ -1,8 +1,6 @@
|
|||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- "9"
|
- "10"
|
||||||
- "8"
|
|
||||||
- "6"
|
|
||||||
before_script:
|
before_script:
|
||||||
- npm install -g gulp
|
- npm install -g gulp
|
||||||
script: gulp
|
script: gulp
|
30
README.md
30
README.md
@ -200,13 +200,41 @@ 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)_
|
||||||
|
|
||||||
|
## Define _Delay_ and _Speed_ using Class
|
||||||
|
|
||||||
|
#### Delay Class
|
||||||
|
|
||||||
You can also add delays directly on the element's class attribute, just like this:
|
You can also add delays directly on the element's class attribute, just like this:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<div class="animated bounce delay-2s">Example</div>
|
<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_
|
| Class Name | Delay Time |
|
||||||
|
| ---------- | ---------- |
|
||||||
|
| `delay-2s` | `2s` |
|
||||||
|
| `delay-3s` | `3s` |
|
||||||
|
| `delay-4s` | `4s` |
|
||||||
|
| `delay-5s` | `5s` |
|
||||||
|
|
||||||
|
> _**Note**: The default delays are from 1 second to 5 seconds only. If you want to add customized delays, you can add it directly to your css_
|
||||||
|
|
||||||
|
#### Slow, Slower, Fast, and Faster Class
|
||||||
|
|
||||||
|
You can control the speed of the animation by adding these classes, as a sample below:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="animated bounce faster">Example</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
| Class Name | Speed Time |
|
||||||
|
| ---------- | ---------- |
|
||||||
|
| `slow` | `2s` |
|
||||||
|
| `slower` | `3s` |
|
||||||
|
| `fast` | `800ms` |
|
||||||
|
| `faster` | `500ms` |
|
||||||
|
|
||||||
|
> _**Note**: The default speed is `1s` which is you don't need to put any class. If you want to add a custom duration, you can add it directly to your css instead_
|
||||||
|
|
||||||
## Custom Builds
|
## Custom Builds
|
||||||
|
|
||||||
|
22
animate.css
vendored
22
animate.css
vendored
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
/*!
|
/*!
|
||||||
* animate.css -http://daneden.me/animate
|
* animate.css -http://daneden.me/animate
|
||||||
* Version - 3.6.2
|
* Version - 3.7.0
|
||||||
* 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
|
||||||
@ -45,6 +45,26 @@
|
|||||||
animation-delay: 5s;
|
animation-delay: 5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animated.fast {
|
||||||
|
-webkit-animation-duration: 800ms;
|
||||||
|
animation-duration: 800ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.faster {
|
||||||
|
-webkit-animation-duration: 500ms;
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.slow {
|
||||||
|
-webkit-animation-duration: 2s;
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.slower {
|
||||||
|
-webkit-animation-duration: 3s;
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes bounce {
|
@-webkit-keyframes bounce {
|
||||||
from,
|
from,
|
||||||
20%,
|
20%,
|
||||||
|
4
animate.min.css
vendored
4
animate.min.css
vendored
File diff suppressed because one or more lines are too long
12
gulpfile.js
12
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: [
|
||||||
@ -41,17 +41,13 @@ var opts = {
|
|||||||
' *',
|
' *',
|
||||||
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
|
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
|
||||||
' */\n\n',
|
' */\n\n',
|
||||||
].join('\n')
|
].join('\n'),
|
||||||
};
|
};
|
||||||
|
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
// Gulp task definitions
|
// Gulp task definitions
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
|
|
||||||
gulp.task('default', function() {
|
|
||||||
runSequence('createCSS', 'addHeader');
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('createCSS', function() {
|
gulp.task('createCSS', function() {
|
||||||
return gulp
|
return gulp
|
||||||
.src(activatedAnimations)
|
.src(activatedAnimations)
|
||||||
@ -70,6 +66,8 @@ gulp.task('addHeader', function() {
|
|||||||
.pipe(gulp.dest(opts.destPath));
|
.pipe(gulp.dest(opts.destPath));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
gulp.task('default', gulp.series('createCSS', 'addHeader'));
|
||||||
|
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
// Helpers/functions
|
// Helpers/functions
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
|
5456
package-lock.json
generated
5456
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "animate.css",
|
"name": "animate.css",
|
||||||
"version": "3.6.2",
|
"version": "3.7.0",
|
||||||
"main": "animate.css",
|
"main": "animate.css",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@ -20,10 +20,10 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^8.0.0",
|
"autoprefixer": "^9.0.1",
|
||||||
"cssnano": "^3.10.0",
|
"cssnano": "^4.0.3",
|
||||||
"eslint": "^4.18.0",
|
"eslint": "^5.2.0",
|
||||||
"gulp": "^3.9.1",
|
"gulp": "^4.0.0",
|
||||||
"gulp-concat": "^2.6.1",
|
"gulp-concat": "^2.6.1",
|
||||||
"gulp-header": "^2.0.1",
|
"gulp-header": "^2.0.1",
|
||||||
"gulp-postcss": "^7.0.1",
|
"gulp-postcss": "^7.0.1",
|
||||||
@ -47,6 +47,7 @@
|
|||||||
"trailingComma": "all"
|
"trailingComma": "all"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"gulp": "./node_modules/gulp/bin/gulp.js",
|
||||||
"start": "gulp",
|
"start": "gulp",
|
||||||
"prettier": "prettier --write \"**/*.{js,json,md,css}\"",
|
"prettier": "prettier --write \"**/*.{js,json,md,css}\"",
|
||||||
"precommit": "lint-staged"
|
"precommit": "lint-staged"
|
||||||
|
@ -26,3 +26,19 @@
|
|||||||
.animated.delay-5s {
|
.animated.delay-5s {
|
||||||
animation-delay: 5s;
|
animation-delay: 5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animated.fast {
|
||||||
|
animation-duration: 800ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.faster {
|
||||||
|
animation-duration: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.slow {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.slower {
|
||||||
|
animation-duration: 3s;
|
||||||
|
}
|
||||||
|
@ -1,28 +1,26 @@
|
|||||||
@keyframes heartBeat{
|
@keyframes heartBeat {
|
||||||
|
0% {
|
||||||
0%{
|
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
14%{
|
14% {
|
||||||
transform: scale(1.3);
|
transform: scale(1.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
28%{
|
28% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
42%{
|
42% {
|
||||||
transform: scale(1.3);
|
transform: scale(1.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
70%{
|
70% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.heartBeat{
|
.heartBeat {
|
||||||
animation-name: heartBeat;
|
animation-name: heartBeat;
|
||||||
animation-duration: 1.3s;
|
animation-duration: 1.3s;
|
||||||
animation-timing-function: ease-in-out;
|
animation-timing-function: ease-in-out;
|
||||||
|
Loading…
Reference in New Issue
Block a user