From 6e23f9b56eb9734778751fd601b26c8499dd5014 Mon Sep 17 00:00:00 2001
From: Ksenia Berezina <kberezina@mozilla.com>
Date: Fri, 17 Jul 2020 14:23:50 -0400
Subject: [PATCH] Fixes #3386 - Separate input validation animation from other
 checkmarks

---
 .../static/css/src/issue-wizard-animations.css      | 13 +++++++++++++
 webcompat/static/css/src/issue-wizard-textarea.css  |  2 +-
 webcompat/static/css/src/issue-wizard.css           |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/webcompat/static/css/src/issue-wizard-animations.css b/webcompat/static/css/src/issue-wizard-animations.css
index 22e8d85fd..1cba081a2 100644
--- 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
index 8bab57c7f..f20141466 100644
--- 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
index fa6c0fb5c..e93204aa2 100644
--- 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%;