mirror of
https://github.com/animate-css/animate.css.git
synced 2024-09-20 18:21:30 +02:00
Merge branch 'master' into master
This commit is contained in:
commit
fe18e0f552
10
.gitignore
vendored
10
.gitignore
vendored
@ -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
|
||||
|
10
README.md
10
README.md
@ -86,7 +86,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/)
|
||||
@ -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)_
|
||||
|
||||
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:
|
||||
|
87
animate.css
vendored
87
animate.css
vendored
@ -2,7 +2,7 @@
|
||||
|
||||
/*!
|
||||
* animate.css -http://daneden.me/animate
|
||||
* Version - 3.6.1
|
||||
* 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%,
|
||||
@ -1913,36 +1938,44 @@
|
||||
|
||||
@-webkit-keyframes flip {
|
||||
from {
|
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||
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;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) 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);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) 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);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
||||
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)
|
||||
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;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: perspective(400px);
|
||||
transform: perspective(400px);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||
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;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
@ -1950,36 +1983,44 @@
|
||||
|
||||
@keyframes flip {
|
||||
from {
|
||||
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||||
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||
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;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
40% {
|
||||
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) 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);
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||||
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) 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);
|
||||
-webkit-animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
|
||||
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)
|
||||
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;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: perspective(400px);
|
||||
transform: perspective(400px);
|
||||
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
|
||||
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;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
@ -2248,13 +2289,11 @@
|
||||
80% {
|
||||
-webkit-transform: skewX(-5deg);
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2274,13 +2313,11 @@
|
||||
80% {
|
||||
-webkit-transform: skewX(-5deg);
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
4
animate.min.css
vendored
4
animate.min.css
vendored
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}": [
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -1,26 +1,29 @@
|
||||
@keyframes flip {
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
@ -11,12 +11,10 @@
|
||||
|
||||
80% {
|
||||
transform: skewX(-5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user