[refactor] improve animations

src/css/animation.css

@@ -9,16 +9,48 @@
 }
 
 @keyframes shake {
-  0%, to {
+  0% {
-    transform: translateZ(0);
+    transform: translate3d(0, 0, 0);
   }
 
-  10%, 30%, 50%, 70%, 90% {
+  10% {
-    transform: translate3d(-10px, 0, 0);
+    transform: translate3d(-1.2em, 0, 0);
   }
 
-  20%, 40%, 60%, 80% {
+  20% {
-    transform: translate3d(10px, 0, 0);
+    transform: translate3d(1.2em, 0, 0);
+  }
+
+  30% {
+    transform: translate3d(-1em, 0, 0);
+  }
+
+  40% {
+    transform: translate3d(1em, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(-0.8em, 0, 0);
+  }
+
+  60% {
+    transform: translate3d(0.8em, 0, 0);
+  }
+
+  70% {
+    transform: translate3d(-0.3em, 0, 0);
+  }
+
+  80% {
+    transform: translate3d(0.3em, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(-0.1em, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
   }
 }
 
@@ -43,3 +75,33 @@
     transform: scale(1);
   }
 }
+
+@keyframes jello {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}

src/css/auto-suggest.css

@@ -42,7 +42,7 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
 .auto-suggest-link:link,

src/css/background.css

@@ -6,7 +6,7 @@
   height: 100vh;
   pointer-events: none;
   z-index: var(--z-index-background);
-  animation: appear var(--layout-transition-speed-slow) 1;
+  animation: appear var(--layout-timing-medium) 1;
   display: none;
 }
 

src/css/base.css

@@ -18,7 +18,7 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  transition: background-color var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast);
 }
 
 .is-layout-scrollpastend body {

src/css/button.css

@@ -22,7 +22,7 @@ input[type="submit"] {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border var(--layout-timing-extra-fast);
   display: inline-flex;
   flex-direction: row;
   justify-content: center;

src/css/edge.css

@@ -10,5 +10,5 @@
   box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
   z-index: var(--z-index-edge);
   pointer-events: none;
-  transition: opacity var(--layout-transition-fast);
+  transition: opacity var(--layout-timing-extra-fast);
 }

src/css/form.css

@@ -19,7 +19,7 @@ input[type="text"] {
   border-color: transparent;
   border-radius: var(--theme-radius);
   cursor: text;
-  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
   -moz-appearance: textfield;
 }
 
@@ -93,7 +93,7 @@ input[type="search"]::placeholder,
 input[type="tel"]::placeholder,
 input[type="text"]::placeholder {
   color: rgb(var(--form-input-placeholder));
-  transition: color var(--layout-transition-fast);
+  transition: color var(--layout-timing-extra-fast);
 }
 
 input[type="email"]:hover::placeholder,
@@ -168,7 +168,7 @@ input[type="radio"] {
   pointer-events: none;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transition: color var(--layout-transition-fast);
+  transition: color var(--layout-timing-extra-fast);
 }
 
 input[type="checkbox"]+label,
@@ -181,7 +181,7 @@ input[type="radio"]+label {
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  transition: transform var(--layout-transition-fast), color var(--layout-transition-fast);
+  transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
 }
 
 input[type="checkbox"]+label:before,
@@ -200,7 +200,7 @@ input[type="radio"]+label:before {
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
-  transition: transform var(--layout-transition-fast), color var(--layout-transition-fast);
+  transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
 }
 
 input[type="checkbox"]+label:before {
@@ -297,7 +297,7 @@ input[type="color"] {
   border-radius: var(--theme-radius);
   overflow: hidden;
   cursor: pointer;
-  transition: border-color var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
+  transition: border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
 input[type="color"]:hover {
@@ -368,7 +368,7 @@ input[type="range"]:before {
   border: 0;
   border-radius: var(--theme-radius);
   transform: translate(0, -50%);
-  transition: all var(--layout-transition-fast);
+  transition: all var(--layout-timing-extra-fast);
 }
 
 input[type="range"]:focus {
@@ -412,7 +412,7 @@ input[type="range"]::-webkit-slider-thumb {
   box-sizing: border-box;
   /* z-index: 2; */
   transform: scale(1);
-  transition: all var(--layout-transition-fast);
+  transition: all var(--layout-timing-extra-fast);
   -webkit-appearance: none;
 }
 
@@ -456,7 +456,7 @@ input[type="range"]::-moz-range-track {
   width: 100%;
   border: 0;
   border-radius: var(--theme-radius);
-  transition: all var(--layout-transition-fast);
+  transition: all var(--layout-timing-extra-fast);
   -webkit-appearance: none;
 }
 
@@ -484,7 +484,7 @@ input[type="range"]::-moz-range-thumb {
   box-sizing: border-box;
   /* z-index: 2; */
   transform: scale(1);
-  transition: all var(--layout-transition-fast);
+  transition: all var(--layout-timing-extra-fast);
   -webkit-appearance: none;
 }
 
@@ -537,7 +537,7 @@ input[type="range"][disabled]::-moz-range-progress {
 .form-helper {
   padding: 0.5em 0;
   color: rgb(var(--form-helper));
-  transition: color var(--layout-transition-fast);
+  transition: color var(--layout-timing-extra-fast);
 }
 
 .form-helper.disabled {
@@ -583,7 +583,7 @@ input[type="range"][disabled]::-moz-range-progress {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  transition: background-color var(--layout-transition-fast), color var(--layout-transition-fast), border var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border var(--layout-timing-extra-fast);
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
@@ -768,7 +768,7 @@ input[type="range"][disabled]::-moz-range-progress {
   border-width: var(--layout-line-width);
   border-style: solid;
   border-color: rgb(var(--form-checkbox-radio-label));
-  transition: border-color var(--layout-transition-fast);
+  transition: border-color var(--layout-timing-extra-fast);
 }
 
 .form-grid:focus,
@@ -826,7 +826,7 @@ input[type="range"][disabled]::-moz-range-progress {
   border-color: transparent;
   position: relative;
   transition: none;
-  transition: border-color var(--layout-transition-fast);
+  transition: border-color var(--layout-timing-extra-fast);
 }
 
 .form-grid input[type="checkbox"]:focus+label,
@@ -885,7 +885,7 @@ input[type="range"][disabled]::-moz-range-progress {
   left: calc(var(--layout-line-width) * 2);
   display: block;
   transform: scale(1);
-  transition: transform var(--layout-transition-fast), background-color var(--layout-transition-fast);
+  transition: transform var(--layout-timing-extra-fast), background-color var(--layout-timing-extra-fast);
 }
 
 .form-grid input[type="checkbox"]:focus+label:before,
@@ -1007,7 +1007,7 @@ input[type="range"][disabled]::-moz-range-progress {
   border-style: solid;
   border-color: transparent;
   border-radius: var(--theme-radius);
-  transition: background-color var(--layout-transition-fast), border-color var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
 }
 
 .form-group-text:hover,

src/css/header.css

@@ -45,7 +45,7 @@
   top: 0;
   left: 0;
   pointer-events: none;
-  transition: background-color var(--layout-transition-slow), opacity var(--layout-transition-slow), border-radius var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
 }
 
 .is-header-radius .header-shade {

src/css/link.css

@@ -57,7 +57,7 @@
   height: var(--link-item-height);
   display: block;
   transform: scale(1);
-  transition: transform var(--layout-transition-fast);
+  transition: transform var(--layout-timing-extra-fast);
   z-index: 1;
 }
 
@@ -102,7 +102,7 @@
   overflow: hidden;
   position: relative;
   user-select: none;
-  transition: background-color var(--layout-transition-fast), height var(--layout-transition-fast), box-shadow var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
 .is-link-item-line-show .link-panel-front {
@@ -244,7 +244,7 @@
   justify-content: flex-end;
   align-items: stretch;
   z-index: 2;
-  transition: height var(--layout-transition-fast), top var(--layout-transition-fast);
+  transition: height var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast);
 }
 
 .is-link-item-line-show .link-panel-back {
@@ -269,7 +269,7 @@
   flex-direction: row;
   align-items: stretch;
   justify-content: center;
-  transition: all var(--layout-transition-fast);
+  transition: all var(--layout-timing-extra-fast);
 }
 
 .link-control-item {
@@ -328,7 +328,7 @@
   overflow: hidden;
   display: none;
   align-items: center;
-  transition: all var(--layout-transition-fast);
+  transition: all var(--layout-timing-extra-fast);
 }
 
 .is-link-url-show .link-url {
@@ -396,12 +396,12 @@
   color: rgb(var(--theme-accent));
   line-height: 1;
   white-space: nowrap;
-  transition: color var(--layout-transition-fast);
+  transition: color var(--layout-timing-extra-fast);
 }
 
 .link-display-icon {
   color: rgb(var(--theme-accent));
-  transition: color var(--layout-transition-fast);
+  transition: color var(--layout-timing-extra-fast);
 }
 
 .is-link-style-block .link-display-letter,
@@ -440,7 +440,7 @@
   font-family: var(--font-regular);
   color: rgb(var(--theme-gray-12));
   display: none;
-  transition: color var(--layout-transition-fast);
+  transition: color var(--layout-timing-extra-fast);
 }
 
 .link-name,
@@ -539,7 +539,7 @@
 
 .link-form-text-icon .link-form-icon {
   transform: scale(1) rotate(0deg);
-  transition: transform var(--layout-transition-fast);
+  transition: transform var(--layout-timing-extra-fast);
 }
 
 .link-form-text-icon:not([disabled]):hover .link-form-icon {

src/css/menu.css

@@ -6,7 +6,7 @@
   width: 100%;
   height: 80vh;
   transform: translateY(calc(-100% - 2em));
-  transition: transform var(--layout-transition-fast);
+  transition: transform var(--layout-timing-extra-fast);
   z-index: var(--z-index-menu);
   pointer-events: none;
 }
@@ -28,7 +28,7 @@
   overflow-y: auto;
   pointer-events: all;
   opacity: 1;
-  transition: background-color var(--layout-transition-fast), opacity var(--layout-transition-fast);
+  transition: background-color var(--layout-timing-extra-fast), opacity var(--layout-timing-extra-fast);
 }
 
 .is-edge .menu-area {

src/css/modal.css

@@ -9,7 +9,7 @@
   transform: translate(-50%, -50%);
   opacity: 0;
   perspective: 1000px;
-  transition: opacity var(--layout-transition-fast);
+  transition: opacity var(--layout-timing-extra-fast);
   z-index: var(--z-index-modal);
 }
 
@@ -34,7 +34,7 @@
   grid-template-rows: 1fr auto;
   justify-items: stretch;
   align-items: stretch;
-  transition: opacity var(--layout-transition-fast);
+  transition: opacity var(--layout-timing-extra-fast);
 }
 
 .modal-wrapper .container {

src/css/shade.css

@@ -6,7 +6,7 @@
   width: calc(100% + 2em);
   height: calc(100% + 2em);
   opacity: 0;
-  transition: opacity var(--layout-transition-fast), background-color var(--layout-transition-fast);
+  transition: opacity var(--layout-timing-extra-fast), background-color var(--layout-timing-extra-fast);
   z-index: var(--z-index-shade);
 }
 

src/css/tip.css

@@ -6,7 +6,7 @@
   top: 0;
   opacity: 1;
   z-index: var(--z-index-tip);
-  transition: opacity var(--layout-transition-fast);
+  transition: opacity var(--layout-timing-extra-fast);
   transform-origin: bottom center;
   pointer-events: none;
 }
@@ -36,11 +36,11 @@
 }
 
 .tip-intro {
-  animation: grow var(--layout-transition-speed-slow) 1;
+  animation: grow var(--layout-timing-medium) 1;
 }
 
 .tip-outro {
-  animation: shirnk var(--layout-transition-speed-slow) 1;
+  animation: shirnk var(--layout-timing-medium) 1;
 }
 
 .tip-message {

src/css/typography.css

@@ -102,7 +102,7 @@ a:active {
   border-bottom-width: calc(var(--layout-line-width) / 2);
   border-bottom-style: solid;
   border-bottom-color: rgb(var(--theme-gray-06));
-  transition: color var(--layout-transition-speed-fast), border-color var(--layout-transition-speed-fast);
+  transition: color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast);
 }
 
 .a-underline:hover {

src/css/utilities.css

@@ -32,11 +32,15 @@
 }
 
 .is-shake {
-  animation: shake var(--layout-transition-speed-slow) 1;
+  animation: shake var(--layout-timing-slow) 1;
 }
 
 .is-pop {
-  animation: pop var(--layout-transition-speed-slow) 1;
+  animation: pop var(--layout-timing-medium) 1;
+}
+
+.is-jello {
+  animation: jello var(--layout-timing-slow) 1;
 }
 
 .sr-only {

src/css/variables.css

@@ -51,9 +51,11 @@
   --layout-width: 80%;
   --layout-padding-multiplier: 4;
   --layout-gutter-multiplier: 4;
-  --layout-transition-fast: 0.2s ease-in-out;
+  --layout-timing-extra-fast: 0.2s ease-in-out;
-  --layout-transition-medium: 0.4s ease-in-out;
+  --layout-timing-fast: 0.4s ease-in-out;
-  --layout-transition-slow: 0.6s ease-in-out;
+  --layout-timing-medium: 0.6s ease-in-out;
+  --layout-timing-slow: 0.8s ease-in-out;
+  --layout-timing-extra-slow: 1s ease-in-out;
   --layout-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
   --layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
   --layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);

src/js/background.js

@@ -61,6 +61,7 @@ var background = (function() {
         var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
         helper.removeClass(controlBackgroundImageFileFeedback, "is-shake");
         helper.removeClass(controlBackgroundImageFileFeedback, "is-pop");
+        helper.removeClass(controlBackgroundImageFileFeedback, "is-jello");
         controlBackgroundImageFileFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
       }
     }
@@ -143,11 +144,20 @@ var background = (function() {
         bind.feedback.animation.set("is-pop", action);
       };
     },
-    clear: function() {
+    clear: function(override) {
+      var options = {
+        animate: null
+      };
+      if (override) {
+        options = helper.applyOptions(options, override);
+      };
       var controlBackgroundImageFileFeedback = helper.e(".control-background-image-file-feedback");
       while (controlBackgroundImageFileFeedback.lastChild) {
         controlBackgroundImageFileFeedback.removeChild(controlBackgroundImageFileFeedback.lastChild);
       };
+      if (options.animate) {
+        bind.feedback.animation.set("is-jello");
+      };
     },
     fail: {
       filetype: function(name) {

src/js/control.js

@@ -2127,7 +2127,9 @@ var control = (function() {
       background.mod.clear.file();
       background.render.input.clear();
       background.render.image();
-      background.render.feedback.clear();
+      background.render.feedback.clear({
+        animate: true
+      });
       background.render.feedback.empty();
     }
   }, {

src/js/data.js

@@ -82,6 +82,7 @@ var data = (function() {
         var controlDataImportFeedback = helper.e(".control-data-import-feedback");
         helper.removeClass(controlDataImportFeedback, "is-shake");
         helper.removeClass(controlDataImportFeedback, "is-pop");
+        helper.removeClass(controlDataImportFeedback, "is-jello");
         controlDataImportFeedback.removeEventListener("animationend", bind.feedback.animation.reset, false);
       }
     }
@@ -147,11 +148,20 @@ var data = (function() {
         bind.feedback.animation.set("is-pop", action);
       };
     },
-    clear: function() {
+    clear: function(override) {
+      var options = {
+        animate: null
+      };
+      if (override) {
+        options = helper.applyOptions(options, override);
+      };
       var controlDataImportFeedback = helper.e(".control-data-import-feedback");
       while (controlDataImportFeedback.lastChild) {
         controlDataImportFeedback.removeChild(controlDataImportFeedback.lastChild);
       };
+      if (options.animate) {
+        bind.feedback.animation.set("is-jello");
+      };
     },
     fail: {
       notJson: function(name) {

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.63.0";
+  var current = "3.64.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.63.0",
+  "version": "3.64.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"