CCA: Fix banner animation

CSS variable does not work for animation-timing-function in @keyframes
(https://crbug.com/1066798). This CL splits the show/hide banner
animation into two animations with different timing function.

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

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

@@ -1186,7 +1186,8 @@ body:not(.recording-ui-paused) #record-time [i18n-content=record_video_paused_ms
   }
   8%,
   92% {
-    animation-timing-function: var(--exit-easing);
+    /* exit-easing. We cannot use variable here (https://crbug.com/1066798) */
+    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
     bottom: 31px;
   }
 }