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` |
|
||||
| `slideInDown` | `slideInLeft` | `slideInRight` | `slideInUp` |
|
||||
| `slideOutDown` | `slideOutLeft` | `slideOutRight` | `slideOutUp` |
|
||||
| `heartBeat` |
|
||||
|
||||
Full example:
|
||||
|
||||
|
|
|
@ -9,7 +9,8 @@
|
|||
"swing": true,
|
||||
"tada": true,
|
||||
"wobble": true,
|
||||
"jello": true
|
||||
"jello": true,
|
||||
"heartBeat": true
|
||||
},
|
||||
|
||||
"bouncing_entrances": {
|
||||
|
|
|
@ -703,6 +703,69 @@
|
|||
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 {
|
||||
from,
|
||||
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"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,json,md,css}": ["prettier --write", "git add"]
|
||||
"*.{js,json,md,css}": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"prettier": {
|
||||
"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