issue/325 add transition-delay to animation mixin (#329)

adaptlearning · May 24, 2022 · 1bb546b · 1bb546b
1 parent d77f83d
commit 1bb546b
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/less/_defaults/_animations.less b/less/_defaults/_animations.less
@@ -51,16 +51,17 @@
 // _onScreen animation mixin for 'fade-in-top', 'fade-in-bottom',
 // 'fade-in-left', and 'fade-in-right'
 // --------------------------------------------------
-.on-screen-anim(fade-in-top; 0; 1; translateY(-100px); translateY(0));
-.on-screen-anim(fade-in-bottom; 0; 1; translateY(100px); translateY(0));
-.on-screen-anim(fade-in-left; 0; 1; translateX(-100px); translateX(0));
-.on-screen-anim(fade-in-right; 0; 1; translateX(100px); translateX(0));
+.on-screen-anim(fade-in-top; 0; 1; 1s; translateY(-100px); translateY(0));
+.on-screen-anim(fade-in-bottom; 0; 1; 1s; translateY(100px); translateY(0));
+.on-screen-anim(fade-in-left; 0; 1; 1s; translateX(-100px); translateX(0));
+.on-screen-anim(fade-in-right; 0; 1; 1s; translateX(100px); translateX(0));
 
-.on-screen-anim(@selector; @opacity-before; @opacity-after; @transform-before; @transform-after) {
+.on-screen-anim(@selector; @opacity-before; @opacity-after; @transition-delay; @transform-before; @transform-after) {
   .@{selector}-before > div {
     opacity: @opacity-before;
     transform: @transform-before;
     transition: all @animation-duration @animation-easing, visibility 0s linear 0s;
+    transition-delay: @transition-delay;
   }
 
   .@{selector}-after > div {