CCA: Add animation when toggling scan box

The animation is based on the suggestion from the UX designer.

Bug: b/172879638
Test: Manually
Change-Id: Iee1dac17d9edac6e6317988c6679025b0c3abf41
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2619246
Commit-Queue: Shik Chen <shik@chromium.org>
Commit-Queue: Wei Lee <wtlee@chromium.org>
Auto-Submit: Shik Chen <shik@chromium.org>
Reviewed-by: Wei Lee <wtlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841941}

chromeos/components/camera_app_ui/resources/css/main.css

@@ -1550,16 +1550,22 @@ body:not(.mode-switching):not(.streaming):not(.review-result) #spinner {
   --border-distance: 8px;
   --border-width: 4px;
   --inner-border-radius: 16px;
+  opacity: 0;
   /* Use padding-top instead of height to make a responsive square, since the
    * percentage in padding-top is relative to the width of the containing
    * block. */
-  padding-top: calc(100% / 3);
+  padding-top: calc(100% / 2);
+  transition: all var(--exit-easing) var(--moderate1-duration);
   visibility: hidden;
-  width: calc(100% / 3);
+  width: calc(100% / 2);
 }
 
 body.photo.scan-barcode .barcode-scan-box {
+  opacity: 1;
+  padding-top: calc(100% / 3);
+  transition: all var(--enter-easing) var(--moderate1-duration);
   visibility: visible;
+  width: calc(100% / 3);
 }
 
 /* The inner scan box with a translucent overlay. */