Skip to content

Commit fe18e0f

Browse files
jamesgeorge007jamesgeorge007
authored
Merge branch 'master' into master
2 parents 502a280 + de6b531 commit fe18e0f

9 files changed

Lines changed: 123 additions & 57 deletions

File tree

‎.gitignore‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
.db
2+
.DS_Store
3+
.idea
4+
.ini
5+
.log
16
.sass-cache
27
node_modules/
3-
npm-debug.log
48
test/
5-
.idea
6-
.DS_Store
7-
Thumbs.db
8-
Desktop.ini

‎README.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $ npm install animate.css --save
2020

2121
## Basic Usage
2222

23-
1. Include the stylesheet on your document's `<head>`
23+
1. Include the stylesheet on your document's `<head>`
2424

2525
```html
2626
<head>
@@ -56,9 +56,9 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
5656
</head>
5757
```
5858

59-
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.
59+
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.
6060

61-
3. Finally you need to add one of the following classes:
61+
3. Finally you need to add one of the following classes:
6262

6363
| Class Name | | | |
6464
| ----------------- | ------------------ | ------------------- | -------------------- |
@@ -86,7 +86,7 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
8686
Full example:
8787

8888
```html
89-
<h1 class="animated infinite bounce">Example</h1>
89+
<h1 class="animated infinite bounce delay-2s">Example</h1>
9090
```
9191

9292
[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
200200

201201
_Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, etc)_
202202

203+
You can also add delays directly on the element's class attribute, just like this:
204+
205+
```html
206+
<div class="animated bounce delay-2s">Example</div>
207+
```
208+
209+
_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_
210+
203211
## Custom Builds
204212

205213
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‎

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/*!
44
* animate.css -http://daneden.me/animate
5-
* Version - 3.6.1
5+
* Version - 3.6.2
66
* Licensed under the MIT license - http://opensource.org/licenses/MIT
77
*
88
* Copyright (c) 2018 Daniel Eden
@@ -20,6 +20,31 @@
2020
animation-iteration-count: infinite;
2121
}
2222

23+
.animated.delay-1s {
24+
-webkit-animation-delay: 1s;
25+
animation-delay: 1s;
26+
}
27+
28+
.animated.delay-2s {
29+
-webkit-animation-delay: 2s;
30+
animation-delay: 2s;
31+
}
32+
33+
.animated.delay-3s {
34+
-webkit-animation-delay: 3s;
35+
animation-delay: 3s;
36+
}
37+
38+
.animated.delay-4s {
39+
-webkit-animation-delay: 4s;
40+
animation-delay: 4s;
41+
}
42+
43+
.animated.delay-5s {
44+
-webkit-animation-delay: 5s;
45+
animation-delay: 5s;
46+
}
47+
2348
@-webkit-keyframes bounce {
2449
from,
2550
20%,
@@ -1913,73 +1938,89 @@
19131938

19141939
@-webkit-keyframes flip {
19151940
from {
1916-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1917-
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1941+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
1942+
rotate3d(0, 1, 0, -360deg);
1943+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
19181944
-webkit-animation-timing-function: ease-out;
19191945
animation-timing-function: ease-out;
19201946
}
19211947

19221948
40% {
1923-
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1924-
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1949+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
1950+
rotate3d(0, 1, 0, -190deg);
1951+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
1952+
rotate3d(0, 1, 0, -190deg);
19251953
-webkit-animation-timing-function: ease-out;
19261954
animation-timing-function: ease-out;
19271955
}
19281956

19291957
50% {
1930-
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1931-
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1958+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
1959+
rotate3d(0, 1, 0, -170deg);
1960+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
1961+
rotate3d(0, 1, 0, -170deg);
19321962
-webkit-animation-timing-function: ease-in;
19331963
animation-timing-function: ease-in;
19341964
}
19351965

19361966
80% {
1937-
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1938-
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1967+
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
1968+
rotate3d(0, 1, 0, 0deg);
1969+
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
1970+
rotate3d(0, 1, 0, 0deg);
19391971
-webkit-animation-timing-function: ease-in;
19401972
animation-timing-function: ease-in;
19411973
}
19421974

19431975
to {
1944-
-webkit-transform: perspective(400px);
1945-
transform: perspective(400px);
1976+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
1977+
rotate3d(0, 1, 0, 0deg);
1978+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
19461979
-webkit-animation-timing-function: ease-in;
19471980
animation-timing-function: ease-in;
19481981
}
19491982
}
19501983

19511984
@keyframes flip {
19521985
from {
1953-
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1954-
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
1986+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
1987+
rotate3d(0, 1, 0, -360deg);
1988+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
19551989
-webkit-animation-timing-function: ease-out;
19561990
animation-timing-function: ease-out;
19571991
}
19581992

19591993
40% {
1960-
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1961-
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
1994+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
1995+
rotate3d(0, 1, 0, -190deg);
1996+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
1997+
rotate3d(0, 1, 0, -190deg);
19621998
-webkit-animation-timing-function: ease-out;
19631999
animation-timing-function: ease-out;
19642000
}
19652001

19662002
50% {
1967-
-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
1968-
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
2003+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2004+
rotate3d(0, 1, 0, -170deg);
2005+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
2006+
rotate3d(0, 1, 0, -170deg);
19692007
-webkit-animation-timing-function: ease-in;
19702008
animation-timing-function: ease-in;
19712009
}
19722010

19732011
80% {
1974-
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
1975-
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
2012+
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
2013+
rotate3d(0, 1, 0, 0deg);
2014+
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
2015+
rotate3d(0, 1, 0, 0deg);
19762016
-webkit-animation-timing-function: ease-in;
19772017
animation-timing-function: ease-in;
19782018
}
19792019

19802020
to {
1981-
-webkit-transform: perspective(400px);
1982-
transform: perspective(400px);
2021+
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
2022+
rotate3d(0, 1, 0, 0deg);
2023+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
19832024
-webkit-animation-timing-function: ease-in;
19842025
animation-timing-function: ease-in;
19852026
}
@@ -2248,13 +2289,11 @@
22482289
80% {
22492290
-webkit-transform: skewX(-5deg);
22502291
transform: skewX(-5deg);
2251-
opacity: 1;
22522292
}
22532293

22542294
to {
22552295
-webkit-transform: translate3d(0, 0, 0);
22562296
transform: translate3d(0, 0, 0);
2257-
opacity: 1;
22582297
}
22592298
}
22602299

@@ -2274,13 +2313,11 @@
22742313
80% {
22752314
-webkit-transform: skewX(-5deg);
22762315
transform: skewX(-5deg);
2277-
opacity: 1;
22782316
}
22792317

22802318
to {
22812319
-webkit-transform: translate3d(0, 0, 0);
22822320
transform: translate3d(0, 0, 0);
2283-
opacity: 1;
22842321
}
22852322
}
22862323

‎animate.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ var opts = {
2525

2626
autoprefixer: {
2727
browsers: ['> 1%', 'last 2 versions', 'Firefox ESR'],
28-
cascade: false,
28+
cascade: false
2929
},
3030

3131
minRename: {
32-
suffix: '.min',
32+
suffix: '.min'
3333
},
3434

3535
banner: [
@@ -41,7 +41,7 @@ var opts = {
4141
' *',
4242
' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
4343
' */\n\n',
44-
].join('\n'),
44+
].join('\n')
4545
};
4646

4747
// ----------------------------

‎package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "animate.css",
3-
"version": "3.6.1",
3+
"version": "3.6.2",
44
"main": "animate.css",
55
"repository": {
66
"type": "git",
@@ -20,19 +20,19 @@
2020
}
2121
},
2222
"devDependencies": {
23-
"autoprefixer": "^7.1.6",
24-
"cssnano": "^3.5.1",
25-
"eslint": "^4.11.0",
23+
"autoprefixer": "^8.0.0",
24+
"cssnano": "^3.10.0",
25+
"eslint": "^4.18.0",
2626
"gulp": "^3.9.1",
27-
"gulp-concat": "^2.6.0",
28-
"gulp-header": "^1.7.1",
29-
"gulp-postcss": "^7.0.0",
27+
"gulp-concat": "^2.6.1",
28+
"gulp-header": "^2.0.1",
29+
"gulp-postcss": "^7.0.1",
3030
"gulp-rename": "^1.2.2",
31-
"gulp-util": "^3.0.7",
31+
"gulp-util": "^3.0.8",
3232
"husky": "^0.14.3",
33-
"lint-staged": "^6.0.0",
34-
"prettier": "^1.9.1",
35-
"run-sequence": "^2.2.0"
33+
"lint-staged": "^7.0.0",
34+
"prettier": "^1.10.2",
35+
"run-sequence": "^2.2.1"
3636
},
3737
"lint-staged": {
3838
"*.{js,json,md,css}": [

‎source/_base.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,23 @@
66
.animated.infinite {
77
animation-iteration-count: infinite;
88
}
9+
10+
.animated.delay-1s {
11+
animation-delay: 1s;
12+
}
13+
14+
.animated.delay-2s {
15+
animation-delay: 2s;
16+
}
17+
18+
.animated.delay-3s {
19+
animation-delay: 3s;
20+
}
21+
22+
.animated.delay-4s {
23+
animation-delay: 4s;
24+
}
25+
26+
.animated.delay-5s {
27+
animation-delay: 5s;
28+
}

‎source/flippers/flip.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
@keyframes flip {
22
from {
3-
transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
3+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
44
animation-timing-function: ease-out;
55
}
66

77
40% {
8-
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
8+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
9+
rotate3d(0, 1, 0, -190deg);
910
animation-timing-function: ease-out;
1011
}
1112

1213
50% {
13-
transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
14+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
15+
rotate3d(0, 1, 0, -170deg);
1416
animation-timing-function: ease-in;
1517
}
1618

1719
80% {
18-
transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
20+
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
21+
rotate3d(0, 1, 0, 0deg);
1922
animation-timing-function: ease-in;
2023
}
2124

2225
to {
23-
transform: perspective(400px);
26+
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
2427
animation-timing-function: ease-in;
2528
}
2629
}

‎source/lightspeed/lightSpeedIn.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,10 @@
1111

1212
80% {
1313
transform: skewX(-5deg);
14-
opacity: 1;
1514
}
1615

1716
to {
1817
transform: translate3d(0, 0, 0);
19-
opacity: 1;
2018
}
2119
}
2220

0 commit comments

Comments
 (0)