😃 Add hertBeat animation as a fix to issue animate-css#829

jamesgeorge007 · Jul 14, 2018 · 5deb9f7 · 5deb9f7
1 parent da9afc0
commit 5deb9f7
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 1 deletion.
diff --git a/animate-config.json b/animate-config.json
@@ -9,7 +9,8 @@
     "swing": true,
     "tada": true,
     "wobble": true,
-    "jello": true
+    "jello": true,
+    "hearBeat": true
   },
 
   "bouncing_entrances": {

diff --git a/animate.css b/animate.css
@@ -370,6 +370,50 @@
   animation-name: headShake;
 }
 
+@-webkit-keyframes heartBeat{
+  0%{
+    transform: scale(1);
+  }
+  14%{
+    transform: scale(1.3);
+  }
+  28%{
+    transform: scale(1);
+  }
+  42%{
+    transform: scale(1.3);
+  }
+  70%{
+    transform: scale(1);
+  }
+}
+
+@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{
+  -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 swing {
   20% {
     -webkit-transform: rotate3d(0, 0, 1, 15deg);

diff --git a/source/attention_seekers/heartBeat.css b/source/attention_seekers/heartBeat.css
@@ -0,0 +1,24 @@
+@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{
+  -webkit-animation-name: heartBeat;
+  animation-name: heartBeat;
+  -webkit-animation-duration: 1.3s;
+  animation-duration: 1.3s;
+  animation-timing-function: ease-in-out;
+}