css animation on note creation

2021-04-12 15:13:43 -04:00
parent fe7abf342b
commit 8432255890
2 changed files with 52 additions and 4 deletions
@@ -64,6 +64,8 @@ body{
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
+  
+  animation: bounce-in-fwd 0.8s ease-in-out both;
  }

 .note > textarea{
@@ -74,4 +76,53 @@ body{
  background-color: #aaccaa;
  border: none;
  outline: none;
-  }
+  }
+
+/* ----------------------------------------------
+ * Generated by Animista on 2021-4-12 15:12:16
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info. 
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation bounce-in-fwd
+ * ----------------------------------------
+ */
+@keyframes bounce-in-fwd {
+  0% {
+    transform: scale(0);
+    animation-timing-function: ease-in;
+    opacity: 0;
+  }
+  38% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+    opacity: 1;
+  }
+  55% {
+    transform: scale(0.7);
+    animation-timing-function: ease-in;
+  }
+  72% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+  81% {
+    transform: scale(0.84);
+    animation-timing-function: ease-in;
+  }
+  89% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+  95% {
+    transform: scale(0.95);
+    animation-timing-function: ease-in;
+  }
+  100% {
+    transform: scale(1);
+    animation-timing-function: ease-out;
+  }
+}
@@ -2,10 +2,7 @@
 <html lang="en">
 <head>
  <title>Tabler</title>
-  <!--<link rel="stylesheet" href="tachyons.min.css"></link>-->
  <link rel="stylesheet" href="index.css"></link>
-  <!--<link rel="stylesheet" href="mini-default.min.css"></link>-->
-  <!--<link rel="stylesheet" href="animate.min.css"></link>-->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="./mithril.min.js"></script>