Skip to content

Commit

Permalink
Merge pull request #830 from jamesgeorge007/master
Browse files Browse the repository at this point in the history
Add heartbeat animation
  • Loading branch information
daneden authored Jul 21, 2018
2 parents de6b531 + c924e61 commit 3098654
Show file tree
Hide file tree
Showing 7 changed files with 6,985 additions and 3 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
3 changes: 2 additions & 1 deletion animate-config.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"swing": true,
"tada": true,
"wobble": true,
"jello": true
"jello": true,
"heartBeat": true
},

"bouncing_entrances": {
Expand Down
63 changes: 63 additions & 0 deletions animate.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%,
Expand Down
2 changes: 1 addition & 1 deletion animate.min.css

Large diffs are not rendered by default.

Loading

0 comments on commit 3098654

Please sign in to comment.