dos

Public/static/css/index.css

@@ -63,25 +63,65 @@ video {
 }
 
 .posi {
-  animation: scale 1s 2.4s linear infinite;
-  -webkit-animation: scale 1s 2.4s linear infinite;
+  animation: bounce 1s 2.4s ease-in infinite;
+  -webkit-animation: bounce 1s 2.4s ease-in infinite;
 }
 
-@keyframes scale {
-  0%,100% {
-    transform: scale(1);
+@-webkit-keyframes bounce {
+  0%,20%,53%,80%,to {
+    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
+    animation-timing-function: cubic-bezier(.215,.61,.355,1);
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0)
   }
-  50% {
-    transform: scale(1.1);
+
+  40%,43% {
+    -webkit-transform: translate3d(0,-30px,0);
+    transform: translate3d(0,-30px,0)
+  }
+
+  40%,43%,70% {
+    -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
+    animation-timing-function: cubic-bezier(.755,.05,.855,.06)
+  }
+
+  70% {
+    -webkit-transform: translate3d(0,-15px,0);
+    transform: translate3d(0,-15px,0)
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0)
   }
 }
 
-@-webkit-keyframes scale {
-  0%,100% {
-    transform: scale(0.9);
+@keyframes bounce {
+  0%,20%,53%,80%,to {
+    -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
+    animation-timing-function: cubic-bezier(.215,.61,.355,1);
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0)
   }
-  50% {
-    transform: scale(1.1);
+
+  40%,43% {
+    -webkit-transform: translate3d(0,-30px,0);
+    transform: translate3d(0,-30px,0)
+  }
+
+  40%,43%,70% {
+    -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
+    animation-timing-function: cubic-bezier(.755,.05,.855,.06)
+  }
+
+  70% {
+    -webkit-transform: translate3d(0,-15px,0);
+    transform: translate3d(0,-15px,0)
+  }
+
+  90% {
+    -webkit-transform: translate3d(0,-4px,0);
+    transform: translate3d(0,-4px,0)
   }
 }