Merge pull request #830 from jamesgeorge007/master
Add heartbeat animation
This commit is contained in:
commit
30986544fc
|
@ -81,6 +81,7 @@ You may [generate a SRI hash](https://www.srihash.org/) of that particular versi
|
||||||
| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
|
| `zoomOutDown` | `zoomOutLeft` | `zoomOutRight` | `zoomOutUp` |
|
||||||
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
|
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
|
||||||
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
|
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
|
||||||
|
| `heartBeat` |
|
||||||
|
|
||||||
Full example:
|
Full example:
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,8 @@
|
||||||
"swing": true,
|
"swing": true,
|
||||||
"tada": true,
|
"tada": true,
|
||||||
"wobble": true,
|
"wobble": true,
|
||||||
"jello": true
|
"jello": true,
|
||||||
|
"heartBeat": true
|
||||||
},
|
},
|
||||||
|
|
||||||
"bouncing_entrances": {
|
"bouncing_entrances": {
|
||||||
|
|
|
@ -703,6 +703,69 @@
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes heartBeat {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
14% {
|
||||||
|
-webkit-transform: scale(1.3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
28% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
42% {
|
||||||
|
-webkit-transform: scale(1.3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes heartBeat {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
14% {
|
||||||
|
-webkit-transform: scale(1.3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
28% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
42% {
|
||||||
|
-webkit-transform: scale(1.3);
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
-webkit-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.heartBeat {
|
||||||
|
-webkit-animation-name: heartBeat;
|
||||||
|
animation-name: heartBeat;
|
||||||
|
-webkit-animation-duration: 1.3s;
|
||||||
|
animation-duration: 1.3s;
|
||||||
|
-webkit-animation-timing-function: ease-in-out;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
@-webkit-keyframes bounceIn {
|
@-webkit-keyframes bounceIn {
|
||||||
from,
|
from,
|
||||||
20%,
|
20%,
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
@ -35,7 +35,10 @@
|
||||||
"run-sequence": "^2.2.1"
|
"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"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"bracketSpacing": false,
|
"bracketSpacing": false,
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
@keyframes heartBeat{
|
||||||
|
|
||||||
|
0%{
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
14%{
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
28%{
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
42%{
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
70%{
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.heartBeat{
|
||||||
|
animation-name: heartBeat;
|
||||||
|
animation-duration: 1.3s;
|
||||||
|
animation-timing-function: ease-in-out;
|
||||||
|
}
|
Loading…
Reference in New Issue