Notification animations feel janky (Valo) (#14656)

Added a small delay for notification animate-in animations.

Change-Id: Id5596957c56eae391c17e3ea8b942617b848c8f7

diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index d0879a1caac5ac9db2aa594986b49a56e6224ffb..9261af0c52c4942f8ba2cc69f8531575b0cb4468 100644 (file)
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -45,14 +45,14 @@ $v-notification-title-color: $v-focus-color !default;
   @if $v-animations-enabled {
 
     .#{$primary-stylename}-animate-in {
-      @include animation(valo-animate-in-fade 180ms);
+      @include animation(valo-animate-in-fade 180ms 10ms backwards);
 
       &.v-position-top {
-        @include animation(valo-animate-in-slide-down 400ms);
+        @include animation(valo-animate-in-slide-down 400ms 10ms backwards);
       }
 
       &.v-position-bottom {
-        @include animation(valo-animate-in-slide-up 400ms);
+        @include animation(valo-animate-in-slide-up 400ms 10ms backwards);
       }
     }
 
@@ -307,7 +307,7 @@ $v-notification-title-color: $v-focus-color !default;
 
     @if $v-animations-enabled {
       &[class*="animate-in"] {
-        @include animation(valo-animate-in-slide-down 300ms);
+        @include animation(valo-animate-in-slide-down 300ms 10ms backwards);
       }
 
       &[class*="animate-out"] {
@@ -321,7 +321,7 @@ $v-notification-title-color: $v-focus-color !default;
 
     @if $v-animations-enabled {
       &[class*="animate-in"] {
-        @include animation(valo-animate-in-slide-up 300ms);
+        @include animation(valo-animate-in-slide-up 300ms 10ms backwards);
       }
 
       &[class*="animate-out"] {