Merge pull request #3400 from webcompat/issue/3386/1

Fixes #3386 - Separate input validation animation from other checkmarks
webcompat · Jul 17, 2020 · 8886176 · 8886176
2 parents cefda25 + 6e23f9b
commit 8886176
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/webcompat/static/css/src/issue-wizard-animations.css b/webcompat/static/css/src/issue-wizard-animations.css
@@ -1,6 +1,19 @@
 /*
 * step and form animations
 */
+@keyframes checkmark {
+  0% {
+    opacity: 0;
+    transform: scale(.8);
+  }
+  50% {
+    transform: scale(1.3);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 
 @keyframes validated {
   0% {

diff --git a/webcompat/static/css/src/issue-wizard-textarea.css b/webcompat/static/css/src/issue-wizard-textarea.css
@@ -63,7 +63,7 @@
 .progress-textarea .progress.complete .tick {
   animation-duration: .25s;
   animation-fill-mode: forwards;
-  animation-name: validated;
+  animation-name: checkmark;
 }
 
 .char-limit {

diff --git a/webcompat/static/css/src/issue-wizard.css b/webcompat/static/css/src/issue-wizard.css
@@ -628,7 +628,7 @@
   align-items: center;
   animation-duration: .25s;
   animation-fill-mode: forwards;
-  animation-name: validated;
+  animation-name: checkmark;
   background-color: var(--issue-selected-outline);
   border: 2px solid var(--color-bg-box);
   border-radius: 50%;