:root { --carousel-load-time: 500ms; --carousel-load-delay-time: 500ms; --article-load-time: 500ms; --article-load-delay-time: 500ms; } /* Animation By Amol Gawale - kindly use 'animation-delay' property in inline stylesheet of element where you applay animation class to delay animation. Ex :- animation-delay: 100ms; ANM [ For Animation ] ANM- ttb500 [Animate Top To Bottom With 500ms Time and Animate with 0% to 100%] btt500 [Animate Bottom To Top With 500ms Time and Animate with 0% to 100%] ltr500 [Animate Left To Right With 500ms Time and Animate with 0% to 100%] rtl500 [Animate Right To Left With 500ms Time and Animate with 0% to 100%] - op [With Opacity 0 T0 1 //if not use then we dont have opacity and Animate with 0% to 100%] - 10px [with Opacity 0 T0 1 And with 10px Animate without 0% to 100% but with 10px] 10px [with 10px Animate without 0% to 100% but with 10px //if not use then it Animate with 0% to 100%] We only have pixels [ 10px, 20px, 30px, 40px, 50px ] We only have Time in ms [ 200, 400, 500, 600, 800, 1000 ] Ex:- ANM-ttb500 [ Animate Top To Bottom , Time 500ms , No Opacity , 0-100 % animation] ANM-btt500 ANM-ltr500 ANM-rtl500 ANM-ttb500-op [ Animate Top To Bottom , Time 500ms , Opacity 0 To 100 , 0-100 % animation] ANM-btt500-op ANM-ltr500-op ANM-rtl500-op ANM-ttb500-10px [ Animate Top To Bottom , Time 500ms , No Opacity , 10px animation] ANM-btt500-10px ANM-ltr500-10px ANM-rtl500-10px ANM-ttb500-op-10px [ Animate Top To Bottom , Time 500ms , Opacity 0 To 100, 10px animation] ANM-btt500-op-10px ANM-ltr500-op-10px ANM-rtl500-op-10px */ /* Animation 200ms Start---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 0-100 % animation ----------- */ .ANM-ttb200{animation-name: ANM-ttb200;animation-fill-mode: forwards;transform: translateY(-100%);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200 {0%{transform: translateY(-100%);}100%{transform: translateY(0);}} .ANM-btt200{animation-name: ANM-btt200;animation-fill-mode: forwards;transform: translateY(100%);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200 {0%{transform: translateY(100%);}100%{transform: translateY(0);}} .ANM-ltr200{animation-name: ANM-ltr200;animation-fill-mode: forwards;transform: translateX(-100%);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200{0%{transform: translateX(-100%);}100%{transform: translateX(0);}} .ANM-rtl200{animation-name: ANM-rtl200;animation-fill-mode: forwards;transform: translateX(100%);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200{0%{transform: translateX(100%);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 0-100 % animation ----------- */ .ANM-ttb200-op{animation-name: ANM-ttb200-op;animation-fill-mode: forwards;transform: translateY(-100%);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-op {0%{transform: translateY(-100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt200-op{animation-name: ANM-btt200-op;animation-fill-mode: forwards;transform: translateY(100%);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-op {0%{transform: translateY(100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr200-op{animation-name: ANM-ltr200-op;animation-fill-mode: forwards;transform: translateX(-100%);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-op {0%{transform: translateX(-100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl200-op{animation-name: ANM-rtl200-op;animation-fill-mode: forwards;transform: translateX(100%);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-op {0%{transform: translateX(100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 10px animation ----------- */ .ANM-ttb200-10px{animation-name: ANM-ttb200-10px;animation-fill-mode: forwards;transform: translateY(-10px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-10px{0%{transform: translateY(-10px);}100%{transform: translateY(0);}} .ANM-btt200-10px{animation-name: ANM-btt200-10px;animation-fill-mode: forwards;transform: translateY(10px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-10px{0%{transform: translateY(10px);}100%{transform: translateY(0);}} .ANM-ltr200-10px{animation-name: ANM-ltr200-10px;animation-fill-mode: forwards;transform: translateX(-10px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-10px{0%{transform: translateX(-10px);}100%{transform: translateX(0);}} .ANM-rtl200-10px{animation-name: ANM-rtl200-10px;animation-fill-mode: forwards;transform: translateX(10px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-10px{0%{transform: translateX(10px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 10px animation ----------- */ .ANM-ttb200-op-10px{animation-name: ANM-ttb200-op-10px;animation-fill-mode: forwards;transform: translateY(-10px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-op-10px {0%{transform: translateY(-10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt200-op-10px{animation-name: ANM-btt200-op-10px;animation-fill-mode: forwards;transform: translateY(10px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-op-10px {0%{transform: translateY(10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr200-op-10px{animation-name: ANM-ltr200-op-10px;animation-fill-mode: forwards;transform: translateX(-10px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-op-10px {0%{transform: translateX(-10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl200-op-10px{animation-name: ANM-rtl200-op-10px;animation-fill-mode: forwards;transform: translateX(10px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-op-10px {0%{transform: translateX(10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 20px animation ----------- */ .ANM-ttb200-20px{animation-name: ANM-ttb200-20px;animation-fill-mode: forwards;transform: translateY(-20px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-20px{0%{transform: translateY(-20px);}100%{transform: translateY(0);}} .ANM-btt200-20px{animation-name: ANM-btt200-20px;animation-fill-mode: forwards;transform: translateY(20px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-20px{0%{transform: translateY(20px);}100%{transform: translateY(0);}} .ANM-ltr200-20px{animation-name: ANM-ltr200-20px;animation-fill-mode: forwards;transform: translateX(-20px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-20px{0%{transform: translateX(-20px);}100%{transform: translateX(0);}} .ANM-rtl200-20px{animation-name: ANM-rtl200-20px;animation-fill-mode: forwards;transform: translateX(20px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-20px{0%{transform: translateX(20px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 20px animation ----------- */ .ANM-ttb200-op-20px{animation-name: ANM-ttb200-op-20px;animation-fill-mode: forwards;transform: translateY(-20px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-op-20px {0%{transform: translateY(-20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt200-op-20px{animation-name: ANM-btt200-op-20px;animation-fill-mode: forwards;transform: translateY(20px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-op-20px {0%{transform: translateY(20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr200-op-20px{animation-name: ANM-ltr200-op-20px;animation-fill-mode: forwards;transform: translateX(-20px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-op-20px {0%{transform: translateX(-20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl200-op-20px{animation-name: ANM-rtl200-op-20px;animation-fill-mode: forwards;transform: translateX(20px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-op-20px {0%{transform: translateX(20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 30px animation ----------- */ .ANM-ttb200-30px{animation-name: ANM-ttb200-30px;animation-fill-mode: forwards;transform: translateY(-30px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-30px{0%{transform: translateY(-30px);}100%{transform: translateY(0);}} .ANM-btt200-30px{animation-name: ANM-btt200-30px;animation-fill-mode: forwards;transform: translateY(30px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-30px{0%{transform: translateY(30px);}100%{transform: translateY(0);}} .ANM-ltr200-30px{animation-name: ANM-ltr200-30px;animation-fill-mode: forwards;transform: translateX(-30px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-30px{0%{transform: translateX(-30px);}100%{transform: translateX(0);}} .ANM-rtl200-30px{animation-name: ANM-rtl200-30px;animation-fill-mode: forwards;transform: translateX(30px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-30px{0%{transform: translateX(30px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 30px animation ----------- */ .ANM-ttb200-op-30px{animation-name: ANM-ttb200-op-30px;animation-fill-mode: forwards;transform: translateY(-30px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-op-30px {0%{transform: translateY(-30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt200-op-30px{animation-name: ANM-btt200-op-30px;animation-fill-mode: forwards;transform: translateY(30px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-op-30px {0%{transform: translateY(30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr200-op-30px{animation-name: ANM-ltr200-op-30px;animation-fill-mode: forwards;transform: translateX(-30px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-op-30px {0%{transform: translateX(-30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl200-op-30px{animation-name: ANM-rtl200-op-30px;animation-fill-mode: forwards;transform: translateX(30px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-op-30px {0%{transform: translateX(30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 40px animation ----------- */ .ANM-ttb200-40px{animation-name: ANM-ttb200-40px;animation-fill-mode: forwards;transform: translateY(-40px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-40px{0%{transform: translateY(-40px);}100%{transform: translateY(0);}} .ANM-btt200-40px{animation-name: ANM-btt200-40px;animation-fill-mode: forwards;transform: translateY(40px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-40px{0%{transform: translateY(40px);}100%{transform: translateY(0);}} .ANM-ltr200-40px{animation-name: ANM-ltr200-40px;animation-fill-mode: forwards;transform: translateX(-40px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-40px{0%{transform: translateX(-40px);}100%{transform: translateX(0);}} .ANM-rtl200-40px{animation-name: ANM-rtl200-40px;animation-fill-mode: forwards;transform: translateX(40px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-40px{0%{transform: translateX(40px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 40px animation ----------- */ .ANM-ttb200-op-40px{animation-name: ANM-ttb200-op-40px;animation-fill-mode: forwards;transform: translateY(-40px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-op-40px {0%{transform: translateY(-40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt200-op-40px{animation-name: ANM-btt200-op-40px;animation-fill-mode: forwards;transform: translateY(40px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-op-40px {0%{transform: translateY(40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr200-op-40px{animation-name: ANM-ltr200-op-40px;animation-fill-mode: forwards;transform: translateX(-40px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-op-40px {0%{transform: translateX(-40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl200-op-40px{animation-name: ANM-rtl200-op-40px;animation-fill-mode: forwards;transform: translateX(40px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-op-40px {0%{transform: translateX(40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 50px animation ----------- */ .ANM-ttb200-50px{animation-name: ANM-ttb200-50px;animation-fill-mode: forwards;transform: translateY(-50px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-50px{0%{transform: translateY(-50px);}100%{transform: translateY(0);}} .ANM-btt200-50px{animation-name: ANM-btt200-50px;animation-fill-mode: forwards;transform: translateY(50px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-50px{0%{transform: translateY(50px);}100%{transform: translateY(0);}} .ANM-ltr200-50px{animation-name: ANM-ltr200-50px;animation-fill-mode: forwards;transform: translateX(-50px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-50px{0%{transform: translateX(-50px);}100%{transform: translateX(0);}} .ANM-rtl200-50px{animation-name: ANM-rtl200-50px;animation-fill-mode: forwards;transform: translateX(50px);animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-50px{0%{transform: translateX(50px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 50px animation ----------- */ .ANM-ttb200-op-50px{animation-name: ANM-ttb200-op-50px;animation-fill-mode: forwards;transform: translateY(-50px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ttb200-op-50px {0%{transform: translateY(-50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt200-op-50px{animation-name: ANM-btt200-op-50px;animation-fill-mode: forwards;transform: translateY(50px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-btt200-op-50px {0%{transform: translateY(50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr200-op-50px{animation-name: ANM-ltr200-op-50px;animation-fill-mode: forwards;transform: translateX(-50px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-ltr200-op-50px {0%{transform: translateX(-50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl200-op-50px{animation-name: ANM-rtl200-op-50px;animation-fill-mode: forwards;transform: translateX(50px);opacity: 0;animation-duration: 200ms;animation-timing-function: ease;} @keyframes ANM-rtl200-op-50px {0%{transform: translateX(50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 200ms End---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 400ms Start---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 0-100 % animation ----------- */ .ANM-ttb400{animation-name: ANM-ttb400;animation-fill-mode: forwards;transform: translateY(-100%);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400 {0%{transform: translateY(-100%);}100%{transform: translateY(0);}} .ANM-btt400{animation-name: ANM-btt400;animation-fill-mode: forwards;transform: translateY(100%);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400 {0%{transform: translateY(100%);}100%{transform: translateY(0);}} .ANM-ltr400{animation-name: ANM-ltr400;animation-fill-mode: forwards;transform: translateX(-100%);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400{0%{transform: translateX(-100%);}100%{transform: translateX(0);}} .ANM-rtl400{animation-name: ANM-rtl400;animation-fill-mode: forwards;transform: translateX(100%);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400{0%{transform: translateX(100%);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 0-100 % animation ----------- */ .ANM-ttb400-op{animation-name: ANM-ttb400-op;animation-fill-mode: forwards;transform: translateY(-100%);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-op {0%{transform: translateY(-100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt400-op{animation-name: ANM-btt400-op;animation-fill-mode: forwards;transform: translateY(100%);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-op {0%{transform: translateY(100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr400-op{animation-name: ANM-ltr400-op;animation-fill-mode: forwards;transform: translateX(-100%);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-op {0%{transform: translateX(-100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl400-op{animation-name: ANM-rtl400-op;animation-fill-mode: forwards;transform: translateX(100%);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-op {0%{transform: translateX(100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 10px animation ----------- */ .ANM-ttb400-10px{animation-name: ANM-ttb400-10px;animation-fill-mode: forwards;transform: translateY(-10px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-10px{0%{transform: translateY(-10px);}100%{transform: translateY(0);}} .ANM-btt400-10px{animation-name: ANM-btt400-10px;animation-fill-mode: forwards;transform: translateY(10px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-10px{0%{transform: translateY(10px);}100%{transform: translateY(0);}} .ANM-ltr400-10px{animation-name: ANM-ltr400-10px;animation-fill-mode: forwards;transform: translateX(-10px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-10px{0%{transform: translateX(-10px);}100%{transform: translateX(0);}} .ANM-rtl400-10px{animation-name: ANM-rtl400-10px;animation-fill-mode: forwards;transform: translateX(10px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-10px{0%{transform: translateX(10px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 10px animation ----------- */ .ANM-ttb400-op-10px{animation-name: ANM-ttb400-op-10px;animation-fill-mode: forwards;transform: translateY(-10px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-op-10px {0%{transform: translateY(-10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt400-op-10px{animation-name: ANM-btt400-op-10px;animation-fill-mode: forwards;transform: translateY(10px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-op-10px {0%{transform: translateY(10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr400-op-10px{animation-name: ANM-ltr400-op-10px;animation-fill-mode: forwards;transform: translateX(-10px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-op-10px {0%{transform: translateX(-10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl400-op-10px{animation-name: ANM-rtl400-op-10px;animation-fill-mode: forwards;transform: translateX(10px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-op-10px {0%{transform: translateX(10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 20px animation ----------- */ .ANM-ttb400-20px{animation-name: ANM-ttb400-20px;animation-fill-mode: forwards;transform: translateY(-20px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-20px{0%{transform: translateY(-20px);}100%{transform: translateY(0);}} .ANM-btt400-20px{animation-name: ANM-btt400-20px;animation-fill-mode: forwards;transform: translateY(20px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-20px{0%{transform: translateY(20px);}100%{transform: translateY(0);}} .ANM-ltr400-20px{animation-name: ANM-ltr400-20px;animation-fill-mode: forwards;transform: translateX(-20px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-20px{0%{transform: translateX(-20px);}100%{transform: translateX(0);}} .ANM-rtl400-20px{animation-name: ANM-rtl400-20px;animation-fill-mode: forwards;transform: translateX(20px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-20px{0%{transform: translateX(20px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 20px animation ----------- */ .ANM-ttb400-op-20px{animation-name: ANM-ttb400-op-20px;animation-fill-mode: forwards;transform: translateY(-20px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-op-20px {0%{transform: translateY(-20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt400-op-20px{animation-name: ANM-btt400-op-20px;animation-fill-mode: forwards;transform: translateY(20px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-op-20px {0%{transform: translateY(20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr400-op-20px{animation-name: ANM-ltr400-op-20px;animation-fill-mode: forwards;transform: translateX(-20px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-op-20px {0%{transform: translateX(-20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl400-op-20px{animation-name: ANM-rtl400-op-20px;animation-fill-mode: forwards;transform: translateX(20px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-op-20px {0%{transform: translateX(20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 30px animation ----------- */ .ANM-ttb400-30px{animation-name: ANM-ttb400-30px;animation-fill-mode: forwards;transform: translateY(-30px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-30px{0%{transform: translateY(-30px);}100%{transform: translateY(0);}} .ANM-btt400-30px{animation-name: ANM-btt400-30px;animation-fill-mode: forwards;transform: translateY(30px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-30px{0%{transform: translateY(30px);}100%{transform: translateY(0);}} .ANM-ltr400-30px{animation-name: ANM-ltr400-30px;animation-fill-mode: forwards;transform: translateX(-30px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-30px{0%{transform: translateX(-30px);}100%{transform: translateX(0);}} .ANM-rtl400-30px{animation-name: ANM-rtl400-30px;animation-fill-mode: forwards;transform: translateX(30px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-30px{0%{transform: translateX(30px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 30px animation ----------- */ .ANM-ttb400-op-30px{animation-name: ANM-ttb400-op-30px;animation-fill-mode: forwards;transform: translateY(-30px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-op-30px {0%{transform: translateY(-30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt400-op-30px{animation-name: ANM-btt400-op-30px;animation-fill-mode: forwards;transform: translateY(30px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-op-30px {0%{transform: translateY(30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr400-op-30px{animation-name: ANM-ltr400-op-30px;animation-fill-mode: forwards;transform: translateX(-30px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-op-30px {0%{transform: translateX(-30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl400-op-30px{animation-name: ANM-rtl400-op-30px;animation-fill-mode: forwards;transform: translateX(30px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-op-30px {0%{transform: translateX(30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 40px animation ----------- */ .ANM-ttb400-40px{animation-name: ANM-ttb400-40px;animation-fill-mode: forwards;transform: translateY(-40px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-40px{0%{transform: translateY(-40px);}100%{transform: translateY(0);}} .ANM-btt400-40px{animation-name: ANM-btt400-40px;animation-fill-mode: forwards;transform: translateY(40px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-40px{0%{transform: translateY(40px);}100%{transform: translateY(0);}} .ANM-ltr400-40px{animation-name: ANM-ltr400-40px;animation-fill-mode: forwards;transform: translateX(-40px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-40px{0%{transform: translateX(-40px);}100%{transform: translateX(0);}} .ANM-rtl400-40px{animation-name: ANM-rtl400-40px;animation-fill-mode: forwards;transform: translateX(40px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-40px{0%{transform: translateX(40px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 40px animation ----------- */ .ANM-ttb400-op-40px{animation-name: ANM-ttb400-op-40px;animation-fill-mode: forwards;transform: translateY(-40px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-op-40px {0%{transform: translateY(-40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt400-op-40px{animation-name: ANM-btt400-op-40px;animation-fill-mode: forwards;transform: translateY(40px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-op-40px {0%{transform: translateY(40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr400-op-40px{animation-name: ANM-ltr400-op-40px;animation-fill-mode: forwards;transform: translateX(-40px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-op-40px {0%{transform: translateX(-40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl400-op-40px{animation-name: ANM-rtl400-op-40px;animation-fill-mode: forwards;transform: translateX(40px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-op-40px {0%{transform: translateX(40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 50px animation ----------- */ .ANM-ttb400-50px{animation-name: ANM-ttb400-50px;animation-fill-mode: forwards;transform: translateY(-50px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-50px{0%{transform: translateY(-50px);}100%{transform: translateY(0);}} .ANM-btt400-50px{animation-name: ANM-btt400-50px;animation-fill-mode: forwards;transform: translateY(50px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-50px{0%{transform: translateY(50px);}100%{transform: translateY(0);}} .ANM-ltr400-50px{animation-name: ANM-ltr400-50px;animation-fill-mode: forwards;transform: translateX(-50px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-50px{0%{transform: translateX(-50px);}100%{transform: translateX(0);}} .ANM-rtl400-50px{animation-name: ANM-rtl400-50px;animation-fill-mode: forwards;transform: translateX(50px);animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-50px{0%{transform: translateX(50px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 50px animation ----------- */ .ANM-ttb400-op-50px{animation-name: ANM-ttb400-op-50px;animation-fill-mode: forwards;transform: translateY(-50px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ttb400-op-50px {0%{transform: translateY(-50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt400-op-50px{animation-name: ANM-btt400-op-50px;animation-fill-mode: forwards;transform: translateY(50px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-btt400-op-50px {0%{transform: translateY(50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr400-op-50px{animation-name: ANM-ltr400-op-50px;animation-fill-mode: forwards;transform: translateX(-50px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-ltr400-op-50px {0%{transform: translateX(-50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl400-op-50px{animation-name: ANM-rtl400-op-50px;animation-fill-mode: forwards;transform: translateX(50px);opacity: 0;animation-duration: 400ms;animation-timing-function: ease;} @keyframes ANM-rtl400-op-50px {0%{transform: translateX(50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 400ms End---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 500ms Start---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 0-100 % animation ----------- */ .ANM-ttb500{animation-name: ANM-ttb500;animation-fill-mode: forwards;transform: translateY(-100%);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500 {0%{transform: translateY(-100%);}100%{transform: translateY(0);}} .ANM-btt500{animation-name: ANM-btt500;animation-fill-mode: forwards;transform: translateY(100%);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500 {0%{transform: translateY(100%);}100%{transform: translateY(0);}} .ANM-ltr500{animation-name: ANM-ltr500;animation-fill-mode: forwards;transform: translateX(-100%);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500{0%{transform: translateX(-100%);}100%{transform: translateX(0);}} .ANM-rtl500{animation-name: ANM-rtl500;animation-fill-mode: forwards;transform: translateX(100%);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500{0%{transform: translateX(100%);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 0-100 % animation ----------- */ .ANM-ttb500-op{animation-name: ANM-ttb500-op;animation-fill-mode: forwards;transform: translateY(-100%);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-op {0%{transform: translateY(-100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt500-op{animation-name: ANM-btt500-op;animation-fill-mode: forwards;transform: translateY(100%);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-op {0%{transform: translateY(100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr500-op{animation-name: ANM-ltr500-op;animation-fill-mode: forwards;transform: translateX(-100%);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-op {0%{transform: translateX(-100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl500-op{animation-name: ANM-rtl500-op;animation-fill-mode: forwards;transform: translateX(100%);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-op {0%{transform: translateX(100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 10px animation ----------- */ .ANM-ttb500-10px{animation-name: ANM-ttb500-10px;animation-fill-mode: forwards;transform: translateY(-10px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-10px{0%{transform: translateY(-10px);}100%{transform: translateY(0);}} .ANM-btt500-10px{animation-name: ANM-btt500-10px;animation-fill-mode: forwards;transform: translateY(10px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-10px{0%{transform: translateY(10px);}100%{transform: translateY(0);}} .ANM-ltr500-10px{animation-name: ANM-ltr500-10px;animation-fill-mode: forwards;transform: translateX(-10px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-10px{0%{transform: translateX(-10px);}100%{transform: translateX(0);}} .ANM-rtl500-10px{animation-name: ANM-rtl500-10px;animation-fill-mode: forwards;transform: translateX(10px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-10px{0%{transform: translateX(10px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 10px animation ----------- */ .ANM-ttb500-op-10px{animation-name: ANM-ttb500-op-10px;animation-fill-mode: forwards;transform: translateY(-10px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-op-10px {0%{transform: translateY(-10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt500-op-10px{animation-name: ANM-btt500-op-10px;animation-fill-mode: forwards;transform: translateY(10px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-op-10px {0%{transform: translateY(10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr500-op-10px{animation-name: ANM-ltr500-op-10px;animation-fill-mode: forwards;transform: translateX(-10px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-op-10px {0%{transform: translateX(-10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl500-op-10px{animation-name: ANM-rtl500-op-10px;animation-fill-mode: forwards;transform: translateX(10px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-op-10px {0%{transform: translateX(10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 20px animation ----------- */ .ANM-ttb500-20px{animation-name: ANM-ttb500-20px;animation-fill-mode: forwards;transform: translateY(-20px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-20px{0%{transform: translateY(-20px);}100%{transform: translateY(0);}} .ANM-btt500-20px{animation-name: ANM-btt500-20px;animation-fill-mode: forwards;transform: translateY(20px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-20px{0%{transform: translateY(20px);}100%{transform: translateY(0);}} .ANM-ltr500-20px{animation-name: ANM-ltr500-20px;animation-fill-mode: forwards;transform: translateX(-20px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-20px{0%{transform: translateX(-20px);}100%{transform: translateX(0);}} .ANM-rtl500-20px{animation-name: ANM-rtl500-20px;animation-fill-mode: forwards;transform: translateX(20px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-20px{0%{transform: translateX(20px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 20px animation ----------- */ .ANM-ttb500-op-20px{animation-name: ANM-ttb500-op-20px;animation-fill-mode: forwards;transform: translateY(-20px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-op-20px {0%{transform: translateY(-20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt500-op-20px{animation-name: ANM-btt500-op-20px;animation-fill-mode: forwards;transform: translateY(20px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-op-20px {0%{transform: translateY(20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr500-op-20px{animation-name: ANM-ltr500-op-20px;animation-fill-mode: forwards;transform: translateX(-20px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-op-20px {0%{transform: translateX(-20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl500-op-20px{animation-name: ANM-rtl500-op-20px;animation-fill-mode: forwards;transform: translateX(20px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-op-20px {0%{transform: translateX(20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 30px animation ----------- */ .ANM-ttb500-30px{animation-name: ANM-ttb500-30px;animation-fill-mode: forwards;transform: translateY(-30px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-30px{0%{transform: translateY(-30px);}100%{transform: translateY(0);}} .ANM-btt500-30px{animation-name: ANM-btt500-30px;animation-fill-mode: forwards;transform: translateY(30px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-30px{0%{transform: translateY(30px);}100%{transform: translateY(0);}} .ANM-ltr500-30px{animation-name: ANM-ltr500-30px;animation-fill-mode: forwards;transform: translateX(-30px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-30px{0%{transform: translateX(-30px);}100%{transform: translateX(0);}} .ANM-rtl500-30px{animation-name: ANM-rtl500-30px;animation-fill-mode: forwards;transform: translateX(30px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-30px{0%{transform: translateX(30px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 30px animation ----------- */ .ANM-ttb500-op-30px{animation-name: ANM-ttb500-op-30px;animation-fill-mode: forwards;transform: translateY(-30px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-op-30px {0%{transform: translateY(-30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt500-op-30px{animation-name: ANM-btt500-op-30px;animation-fill-mode: forwards;transform: translateY(30px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-op-30px {0%{transform: translateY(30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr500-op-30px{animation-name: ANM-ltr500-op-30px;animation-fill-mode: forwards;transform: translateX(-30px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-op-30px {0%{transform: translateX(-30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl500-op-30px{animation-name: ANM-rtl500-op-30px;animation-fill-mode: forwards;transform: translateX(30px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-op-30px {0%{transform: translateX(30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 40px animation ----------- */ .ANM-ttb500-40px{animation-name: ANM-ttb500-40px;animation-fill-mode: forwards;transform: translateY(-40px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-40px{0%{transform: translateY(-40px);}100%{transform: translateY(0);}} .ANM-btt500-40px{animation-name: ANM-btt500-40px;animation-fill-mode: forwards;transform: translateY(40px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-40px{0%{transform: translateY(40px);}100%{transform: translateY(0);}} .ANM-ltr500-40px{animation-name: ANM-ltr500-40px;animation-fill-mode: forwards;transform: translateX(-40px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-40px{0%{transform: translateX(-40px);}100%{transform: translateX(0);}} .ANM-rtl500-40px{animation-name: ANM-rtl500-40px;animation-fill-mode: forwards;transform: translateX(40px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-40px{0%{transform: translateX(40px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 40px animation ----------- */ .ANM-ttb500-op-40px{animation-name: ANM-ttb500-op-40px;animation-fill-mode: forwards;transform: translateY(-40px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-op-40px {0%{transform: translateY(-40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt500-op-40px{animation-name: ANM-btt500-op-40px;animation-fill-mode: forwards;transform: translateY(40px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-op-40px {0%{transform: translateY(40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr500-op-40px{animation-name: ANM-ltr500-op-40px;animation-fill-mode: forwards;transform: translateX(-40px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-op-40px {0%{transform: translateX(-40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl500-op-40px{animation-name: ANM-rtl500-op-40px;animation-fill-mode: forwards;transform: translateX(40px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-op-40px {0%{transform: translateX(40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 50px animation ----------- */ .ANM-ttb500-50px{animation-name: ANM-ttb500-50px;animation-fill-mode: forwards;transform: translateY(-50px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-50px{0%{transform: translateY(-50px);}100%{transform: translateY(0);}} .ANM-btt500-50px{animation-name: ANM-btt500-50px;animation-fill-mode: forwards;transform: translateY(50px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-50px{0%{transform: translateY(50px);}100%{transform: translateY(0);}} .ANM-ltr500-50px{animation-name: ANM-ltr500-50px;animation-fill-mode: forwards;transform: translateX(-50px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-50px{0%{transform: translateX(-50px);}100%{transform: translateX(0);}} .ANM-rtl500-50px{animation-name: ANM-rtl500-50px;animation-fill-mode: forwards;transform: translateX(50px);animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-50px{0%{transform: translateX(50px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 50px animation ----------- */ .ANM-ttb500-op-50px{animation-name: ANM-ttb500-op-50px;animation-fill-mode: forwards;transform: translateY(-50px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ttb500-op-50px {0%{transform: translateY(-50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt500-op-50px{animation-name: ANM-btt500-op-50px;animation-fill-mode: forwards;transform: translateY(50px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-btt500-op-50px {0%{transform: translateY(50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr500-op-50px{animation-name: ANM-ltr500-op-50px;animation-fill-mode: forwards;transform: translateX(-50px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-ltr500-op-50px {0%{transform: translateX(-50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl500-op-50px{animation-name: ANM-rtl500-op-50px;animation-fill-mode: forwards;transform: translateX(50px);opacity: 0;animation-duration: 500ms;animation-timing-function: ease;} @keyframes ANM-rtl500-op-50px {0%{transform: translateX(50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 500ms End---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 600ms Start---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 0-100 % animation ----------- */ .ANM-ttb600{animation-name: ANM-ttb600;animation-fill-mode: forwards;transform: translateY(-100%);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600 {0%{transform: translateY(-100%);}100%{transform: translateY(0);}} .ANM-btt600{animation-name: ANM-btt600;animation-fill-mode: forwards;transform: translateY(100%);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600 {0%{transform: translateY(100%);}100%{transform: translateY(0);}} .ANM-ltr600{animation-name: ANM-ltr600;animation-fill-mode: forwards;transform: translateX(-100%);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600{0%{transform: translateX(-100%);}100%{transform: translateX(0);}} .ANM-rtl600{animation-name: ANM-rtl600;animation-fill-mode: forwards;transform: translateX(100%);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600{0%{transform: translateX(100%);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 0-100 % animation ----------- */ .ANM-ttb600-op{animation-name: ANM-ttb600-op;animation-fill-mode: forwards;transform: translateY(-100%);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-op {0%{transform: translateY(-100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt600-op{animation-name: ANM-btt600-op;animation-fill-mode: forwards;transform: translateY(100%);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-op {0%{transform: translateY(100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr600-op{animation-name: ANM-ltr600-op;animation-fill-mode: forwards;transform: translateX(-100%);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-op {0%{transform: translateX(-100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl600-op{animation-name: ANM-rtl600-op;animation-fill-mode: forwards;transform: translateX(100%);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-op {0%{transform: translateX(100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 10px animation ----------- */ .ANM-ttb600-10px{animation-name: ANM-ttb600-10px;animation-fill-mode: forwards;transform: translateY(-10px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-10px{0%{transform: translateY(-10px);}100%{transform: translateY(0);}} .ANM-btt600-10px{animation-name: ANM-btt600-10px;animation-fill-mode: forwards;transform: translateY(10px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-10px{0%{transform: translateY(10px);}100%{transform: translateY(0);}} .ANM-ltr600-10px{animation-name: ANM-ltr600-10px;animation-fill-mode: forwards;transform: translateX(-10px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-10px{0%{transform: translateX(-10px);}100%{transform: translateX(0);}} .ANM-rtl600-10px{animation-name: ANM-rtl600-10px;animation-fill-mode: forwards;transform: translateX(10px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-10px{0%{transform: translateX(10px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 10px animation ----------- */ .ANM-ttb600-op-10px{animation-name: ANM-ttb600-op-10px;animation-fill-mode: forwards;transform: translateY(-10px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-op-10px {0%{transform: translateY(-10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt600-op-10px{animation-name: ANM-btt600-op-10px;animation-fill-mode: forwards;transform: translateY(10px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-op-10px {0%{transform: translateY(10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr600-op-10px{animation-name: ANM-ltr600-op-10px;animation-fill-mode: forwards;transform: translateX(-10px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-op-10px {0%{transform: translateX(-10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl600-op-10px{animation-name: ANM-rtl600-op-10px;animation-fill-mode: forwards;transform: translateX(10px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-op-10px {0%{transform: translateX(10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 20px animation ----------- */ .ANM-ttb600-20px{animation-name: ANM-ttb600-20px;animation-fill-mode: forwards;transform: translateY(-20px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-20px{0%{transform: translateY(-20px);}100%{transform: translateY(0);}} .ANM-btt600-20px{animation-name: ANM-btt600-20px;animation-fill-mode: forwards;transform: translateY(20px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-20px{0%{transform: translateY(20px);}100%{transform: translateY(0);}} .ANM-ltr600-20px{animation-name: ANM-ltr600-20px;animation-fill-mode: forwards;transform: translateX(-20px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-20px{0%{transform: translateX(-20px);}100%{transform: translateX(0);}} .ANM-rtl600-20px{animation-name: ANM-rtl600-20px;animation-fill-mode: forwards;transform: translateX(20px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-20px{0%{transform: translateX(20px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 20px animation ----------- */ .ANM-ttb600-op-20px{animation-name: ANM-ttb600-op-20px;animation-fill-mode: forwards;transform: translateY(-20px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-op-20px {0%{transform: translateY(-20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt600-op-20px{animation-name: ANM-btt600-op-20px;animation-fill-mode: forwards;transform: translateY(20px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-op-20px {0%{transform: translateY(20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr600-op-20px{animation-name: ANM-ltr600-op-20px;animation-fill-mode: forwards;transform: translateX(-20px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-op-20px {0%{transform: translateX(-20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl600-op-20px{animation-name: ANM-rtl600-op-20px;animation-fill-mode: forwards;transform: translateX(20px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-op-20px {0%{transform: translateX(20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 30px animation ----------- */ .ANM-ttb600-30px{animation-name: ANM-ttb600-30px;animation-fill-mode: forwards;transform: translateY(-30px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-30px{0%{transform: translateY(-30px);}100%{transform: translateY(0);}} .ANM-btt600-30px{animation-name: ANM-btt600-30px;animation-fill-mode: forwards;transform: translateY(30px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-30px{0%{transform: translateY(30px);}100%{transform: translateY(0);}} .ANM-ltr600-30px{animation-name: ANM-ltr600-30px;animation-fill-mode: forwards;transform: translateX(-30px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-30px{0%{transform: translateX(-30px);}100%{transform: translateX(0);}} .ANM-rtl600-30px{animation-name: ANM-rtl600-30px;animation-fill-mode: forwards;transform: translateX(30px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-30px{0%{transform: translateX(30px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 30px animation ----------- */ .ANM-ttb600-op-30px{animation-name: ANM-ttb600-op-30px;animation-fill-mode: forwards;transform: translateY(-30px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-op-30px {0%{transform: translateY(-30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt600-op-30px{animation-name: ANM-btt600-op-30px;animation-fill-mode: forwards;transform: translateY(30px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-op-30px {0%{transform: translateY(30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr600-op-30px{animation-name: ANM-ltr600-op-30px;animation-fill-mode: forwards;transform: translateX(-30px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-op-30px {0%{transform: translateX(-30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl600-op-30px{animation-name: ANM-rtl600-op-30px;animation-fill-mode: forwards;transform: translateX(30px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-op-30px {0%{transform: translateX(30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 40px animation ----------- */ .ANM-ttb600-40px{animation-name: ANM-ttb600-40px;animation-fill-mode: forwards;transform: translateY(-40px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-40px{0%{transform: translateY(-40px);}100%{transform: translateY(0);}} .ANM-btt600-40px{animation-name: ANM-btt600-40px;animation-fill-mode: forwards;transform: translateY(40px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-40px{0%{transform: translateY(40px);}100%{transform: translateY(0);}} .ANM-ltr600-40px{animation-name: ANM-ltr600-40px;animation-fill-mode: forwards;transform: translateX(-40px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-40px{0%{transform: translateX(-40px);}100%{transform: translateX(0);}} .ANM-rtl600-40px{animation-name: ANM-rtl600-40px;animation-fill-mode: forwards;transform: translateX(40px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-40px{0%{transform: translateX(40px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 40px animation ----------- */ .ANM-ttb600-op-40px{animation-name: ANM-ttb600-op-40px;animation-fill-mode: forwards;transform: translateY(-40px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-op-40px {0%{transform: translateY(-40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt600-op-40px{animation-name: ANM-btt600-op-40px;animation-fill-mode: forwards;transform: translateY(40px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-op-40px {0%{transform: translateY(40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr600-op-40px{animation-name: ANM-ltr600-op-40px;animation-fill-mode: forwards;transform: translateX(-40px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-op-40px {0%{transform: translateX(-40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl600-op-40px{animation-name: ANM-rtl600-op-40px;animation-fill-mode: forwards;transform: translateX(40px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-op-40px {0%{transform: translateX(40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 50px animation ----------- */ .ANM-ttb600-50px{animation-name: ANM-ttb600-50px;animation-fill-mode: forwards;transform: translateY(-50px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-50px{0%{transform: translateY(-50px);}100%{transform: translateY(0);}} .ANM-btt600-50px{animation-name: ANM-btt600-50px;animation-fill-mode: forwards;transform: translateY(50px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-50px{0%{transform: translateY(50px);}100%{transform: translateY(0);}} .ANM-ltr600-50px{animation-name: ANM-ltr600-50px;animation-fill-mode: forwards;transform: translateX(-50px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-50px{0%{transform: translateX(-50px);}100%{transform: translateX(0);}} .ANM-rtl600-50px{animation-name: ANM-rtl600-50px;animation-fill-mode: forwards;transform: translateX(50px);animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-50px{0%{transform: translateX(50px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 50px animation ----------- */ .ANM-ttb600-op-50px{animation-name: ANM-ttb600-op-50px;animation-fill-mode: forwards;transform: translateY(-50px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ttb600-op-50px {0%{transform: translateY(-50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt600-op-50px{animation-name: ANM-btt600-op-50px;animation-fill-mode: forwards;transform: translateY(50px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-btt600-op-50px {0%{transform: translateY(50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr600-op-50px{animation-name: ANM-ltr600-op-50px;animation-fill-mode: forwards;transform: translateX(-50px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-ltr600-op-50px {0%{transform: translateX(-50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl600-op-50px{animation-name: ANM-rtl600-op-50px;animation-fill-mode: forwards;transform: translateX(50px);opacity: 0;animation-duration: 600ms;animation-timing-function: ease;} @keyframes ANM-rtl600-op-50px {0%{transform: translateX(50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 600ms End---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 800ms Start---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 0-100 % animation ----------- */ .ANM-ttb800{animation-name: ANM-ttb800;animation-fill-mode: forwards;transform: translateY(-100%);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800 {0%{transform: translateY(-100%);}100%{transform: translateY(0);}} .ANM-btt800{animation-name: ANM-btt800;animation-fill-mode: forwards;transform: translateY(100%);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800 {0%{transform: translateY(100%);}100%{transform: translateY(0);}} .ANM-ltr800{animation-name: ANM-ltr800;animation-fill-mode: forwards;transform: translateX(-100%);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800{0%{transform: translateX(-100%);}100%{transform: translateX(0);}} .ANM-rtl800{animation-name: ANM-rtl800;animation-fill-mode: forwards;transform: translateX(100%);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800{0%{transform: translateX(100%);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 0-100 % animation ----------- */ .ANM-ttb800-op{animation-name: ANM-ttb800-op;animation-fill-mode: forwards;transform: translateY(-100%);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-op {0%{transform: translateY(-100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt800-op{animation-name: ANM-btt800-op;animation-fill-mode: forwards;transform: translateY(100%);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-op {0%{transform: translateY(100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr800-op{animation-name: ANM-ltr800-op;animation-fill-mode: forwards;transform: translateX(-100%);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-op {0%{transform: translateX(-100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl800-op{animation-name: ANM-rtl800-op;animation-fill-mode: forwards;transform: translateX(100%);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-op {0%{transform: translateX(100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 10px animation ----------- */ .ANM-ttb800-10px{animation-name: ANM-ttb800-10px;animation-fill-mode: forwards;transform: translateY(-10px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-10px{0%{transform: translateY(-10px);}100%{transform: translateY(0);}} .ANM-btt800-10px{animation-name: ANM-btt800-10px;animation-fill-mode: forwards;transform: translateY(10px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-10px{0%{transform: translateY(10px);}100%{transform: translateY(0);}} .ANM-ltr800-10px{animation-name: ANM-ltr800-10px;animation-fill-mode: forwards;transform: translateX(-10px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-10px{0%{transform: translateX(-10px);}100%{transform: translateX(0);}} .ANM-rtl800-10px{animation-name: ANM-rtl800-10px;animation-fill-mode: forwards;transform: translateX(10px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-10px{0%{transform: translateX(10px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 10px animation ----------- */ .ANM-ttb800-op-10px{animation-name: ANM-ttb800-op-10px;animation-fill-mode: forwards;transform: translateY(-10px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-op-10px {0%{transform: translateY(-10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt800-op-10px{animation-name: ANM-btt800-op-10px;animation-fill-mode: forwards;transform: translateY(10px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-op-10px {0%{transform: translateY(10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr800-op-10px{animation-name: ANM-ltr800-op-10px;animation-fill-mode: forwards;transform: translateX(-10px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-op-10px {0%{transform: translateX(-10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl800-op-10px{animation-name: ANM-rtl800-op-10px;animation-fill-mode: forwards;transform: translateX(10px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-op-10px {0%{transform: translateX(10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 20px animation ----------- */ .ANM-ttb800-20px{animation-name: ANM-ttb800-20px;animation-fill-mode: forwards;transform: translateY(-20px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-20px{0%{transform: translateY(-20px);}100%{transform: translateY(0);}} .ANM-btt800-20px{animation-name: ANM-btt800-20px;animation-fill-mode: forwards;transform: translateY(20px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-20px{0%{transform: translateY(20px);}100%{transform: translateY(0);}} .ANM-ltr800-20px{animation-name: ANM-ltr800-20px;animation-fill-mode: forwards;transform: translateX(-20px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-20px{0%{transform: translateX(-20px);}100%{transform: translateX(0);}} .ANM-rtl800-20px{animation-name: ANM-rtl800-20px;animation-fill-mode: forwards;transform: translateX(20px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-20px{0%{transform: translateX(20px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 20px animation ----------- */ .ANM-ttb800-op-20px{animation-name: ANM-ttb800-op-20px;animation-fill-mode: forwards;transform: translateY(-20px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-op-20px {0%{transform: translateY(-20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt800-op-20px{animation-name: ANM-btt800-op-20px;animation-fill-mode: forwards;transform: translateY(20px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-op-20px {0%{transform: translateY(20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr800-op-20px{animation-name: ANM-ltr800-op-20px;animation-fill-mode: forwards;transform: translateX(-20px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-op-20px {0%{transform: translateX(-20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl800-op-20px{animation-name: ANM-rtl800-op-20px;animation-fill-mode: forwards;transform: translateX(20px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-op-20px {0%{transform: translateX(20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 30px animation ----------- */ .ANM-ttb800-30px{animation-name: ANM-ttb800-30px;animation-fill-mode: forwards;transform: translateY(-30px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-30px{0%{transform: translateY(-30px);}100%{transform: translateY(0);}} .ANM-btt800-30px{animation-name: ANM-btt800-30px;animation-fill-mode: forwards;transform: translateY(30px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-30px{0%{transform: translateY(30px);}100%{transform: translateY(0);}} .ANM-ltr800-30px{animation-name: ANM-ltr800-30px;animation-fill-mode: forwards;transform: translateX(-30px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-30px{0%{transform: translateX(-30px);}100%{transform: translateX(0);}} .ANM-rtl800-30px{animation-name: ANM-rtl800-30px;animation-fill-mode: forwards;transform: translateX(30px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-30px{0%{transform: translateX(30px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 30px animation ----------- */ .ANM-ttb800-op-30px{animation-name: ANM-ttb800-op-30px;animation-fill-mode: forwards;transform: translateY(-30px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-op-30px {0%{transform: translateY(-30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt800-op-30px{animation-name: ANM-btt800-op-30px;animation-fill-mode: forwards;transform: translateY(30px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-op-30px {0%{transform: translateY(30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr800-op-30px{animation-name: ANM-ltr800-op-30px;animation-fill-mode: forwards;transform: translateX(-30px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-op-30px {0%{transform: translateX(-30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl800-op-30px{animation-name: ANM-rtl800-op-30px;animation-fill-mode: forwards;transform: translateX(30px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-op-30px {0%{transform: translateX(30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 40px animation ----------- */ .ANM-ttb800-40px{animation-name: ANM-ttb800-40px;animation-fill-mode: forwards;transform: translateY(-40px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-40px{0%{transform: translateY(-40px);}100%{transform: translateY(0);}} .ANM-btt800-40px{animation-name: ANM-btt800-40px;animation-fill-mode: forwards;transform: translateY(40px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-40px{0%{transform: translateY(40px);}100%{transform: translateY(0);}} .ANM-ltr800-40px{animation-name: ANM-ltr800-40px;animation-fill-mode: forwards;transform: translateX(-40px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-40px{0%{transform: translateX(-40px);}100%{transform: translateX(0);}} .ANM-rtl800-40px{animation-name: ANM-rtl800-40px;animation-fill-mode: forwards;transform: translateX(40px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-40px{0%{transform: translateX(40px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 40px animation ----------- */ .ANM-ttb800-op-40px{animation-name: ANM-ttb800-op-40px;animation-fill-mode: forwards;transform: translateY(-40px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-op-40px {0%{transform: translateY(-40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt800-op-40px{animation-name: ANM-btt800-op-40px;animation-fill-mode: forwards;transform: translateY(40px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-op-40px {0%{transform: translateY(40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr800-op-40px{animation-name: ANM-ltr800-op-40px;animation-fill-mode: forwards;transform: translateX(-40px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-op-40px {0%{transform: translateX(-40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl800-op-40px{animation-name: ANM-rtl800-op-40px;animation-fill-mode: forwards;transform: translateX(40px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-op-40px {0%{transform: translateX(40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 50px animation ----------- */ .ANM-ttb800-50px{animation-name: ANM-ttb800-50px;animation-fill-mode: forwards;transform: translateY(-50px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-50px{0%{transform: translateY(-50px);}100%{transform: translateY(0);}} .ANM-btt800-50px{animation-name: ANM-btt800-50px;animation-fill-mode: forwards;transform: translateY(50px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-50px{0%{transform: translateY(50px);}100%{transform: translateY(0);}} .ANM-ltr800-50px{animation-name: ANM-ltr800-50px;animation-fill-mode: forwards;transform: translateX(-50px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-50px{0%{transform: translateX(-50px);}100%{transform: translateX(0);}} .ANM-rtl800-50px{animation-name: ANM-rtl800-50px;animation-fill-mode: forwards;transform: translateX(50px);animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-50px{0%{transform: translateX(50px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 50px animation ----------- */ .ANM-ttb800-op-50px{animation-name: ANM-ttb800-op-50px;animation-fill-mode: forwards;transform: translateY(-50px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ttb800-op-50px {0%{transform: translateY(-50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt800-op-50px{animation-name: ANM-btt800-op-50px;animation-fill-mode: forwards;transform: translateY(50px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-btt800-op-50px {0%{transform: translateY(50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr800-op-50px{animation-name: ANM-ltr800-op-50px;animation-fill-mode: forwards;transform: translateX(-50px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-ltr800-op-50px {0%{transform: translateX(-50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl800-op-50px{animation-name: ANM-rtl800-op-50px;animation-fill-mode: forwards;transform: translateX(50px);opacity: 0;animation-duration: 800ms;animation-timing-function: ease;} @keyframes ANM-rtl800-op-50px {0%{transform: translateX(50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 800ms End---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 1000ms Start---------------------------------------------------------------------------------------------------------------------------------------------------- */ /* Animation 0-100 % animation ----------- */ .ANM-ttb1000{animation-name: ANM-ttb1000;animation-fill-mode: forwards;transform: translateY(-100%);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000 {0%{transform: translateY(-100%);}100%{transform: translateY(0);}} .ANM-btt1000{animation-name: ANM-btt1000;animation-fill-mode: forwards;transform: translateY(100%);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000 {0%{transform: translateY(100%);}100%{transform: translateY(0);}} .ANM-ltr1000{animation-name: ANM-ltr1000;animation-fill-mode: forwards;transform: translateX(-100%);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000{0%{transform: translateX(-100%);}100%{transform: translateX(0);}} .ANM-rtl1000{animation-name: ANM-rtl1000;animation-fill-mode: forwards;transform: translateX(100%);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000{0%{transform: translateX(100%);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 0-100 % animation ----------- */ .ANM-ttb1000-op{animation-name: ANM-ttb1000-op;animation-fill-mode: forwards;transform: translateY(-100%);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-op {0%{transform: translateY(-100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt1000-op{animation-name: ANM-btt1000-op;animation-fill-mode: forwards;transform: translateY(100%);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-op {0%{transform: translateY(100%);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr1000-op{animation-name: ANM-ltr1000-op;animation-fill-mode: forwards;transform: translateX(-100%);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-op {0%{transform: translateX(-100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl1000-op{animation-name: ANM-rtl1000-op;animation-fill-mode: forwards;transform: translateX(100%);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-op {0%{transform: translateX(100%);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 10px animation ----------- */ .ANM-ttb1000-10px{animation-name: ANM-ttb1000-10px;animation-fill-mode: forwards;transform: translateY(-10px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-10px{0%{transform: translateY(-10px);}100%{transform: translateY(0);}} .ANM-btt1000-10px{animation-name: ANM-btt1000-10px;animation-fill-mode: forwards;transform: translateY(10px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-10px{0%{transform: translateY(10px);}100%{transform: translateY(0);}} .ANM-ltr1000-10px{animation-name: ANM-ltr1000-10px;animation-fill-mode: forwards;transform: translateX(-10px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-10px{0%{transform: translateX(-10px);}100%{transform: translateX(0);}} .ANM-rtl1000-10px{animation-name: ANM-rtl1000-10px;animation-fill-mode: forwards;transform: translateX(10px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-10px{0%{transform: translateX(10px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 10px animation ----------- */ .ANM-ttb1000-op-10px{animation-name: ANM-ttb1000-op-10px;animation-fill-mode: forwards;transform: translateY(-10px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-op-10px {0%{transform: translateY(-10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt1000-op-10px{animation-name: ANM-btt1000-op-10px;animation-fill-mode: forwards;transform: translateY(10px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-op-10px {0%{transform: translateY(10px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr1000-op-10px{animation-name: ANM-ltr1000-op-10px;animation-fill-mode: forwards;transform: translateX(-10px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-op-10px {0%{transform: translateX(-10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl1000-op-10px{animation-name: ANM-rtl1000-op-10px;animation-fill-mode: forwards;transform: translateX(10px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-op-10px {0%{transform: translateX(10px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 20px animation ----------- */ .ANM-ttb1000-20px{animation-name: ANM-ttb1000-20px;animation-fill-mode: forwards;transform: translateY(-20px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-20px{0%{transform: translateY(-20px);}100%{transform: translateY(0);}} .ANM-btt1000-20px{animation-name: ANM-btt1000-20px;animation-fill-mode: forwards;transform: translateY(20px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-20px{0%{transform: translateY(20px);}100%{transform: translateY(0);}} .ANM-ltr1000-20px{animation-name: ANM-ltr1000-20px;animation-fill-mode: forwards;transform: translateX(-20px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-20px{0%{transform: translateX(-20px);}100%{transform: translateX(0);}} .ANM-rtl1000-20px{animation-name: ANM-rtl1000-20px;animation-fill-mode: forwards;transform: translateX(20px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-20px{0%{transform: translateX(20px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 20px animation ----------- */ .ANM-ttb1000-op-20px{animation-name: ANM-ttb1000-op-20px;animation-fill-mode: forwards;transform: translateY(-20px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-op-20px {0%{transform: translateY(-20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt1000-op-20px{animation-name: ANM-btt1000-op-20px;animation-fill-mode: forwards;transform: translateY(20px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-op-20px {0%{transform: translateY(20px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr1000-op-20px{animation-name: ANM-ltr1000-op-20px;animation-fill-mode: forwards;transform: translateX(-20px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-op-20px {0%{transform: translateX(-20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl1000-op-20px{animation-name: ANM-rtl1000-op-20px;animation-fill-mode: forwards;transform: translateX(20px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-op-20px {0%{transform: translateX(20px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 30px animation ----------- */ .ANM-ttb1000-30px{animation-name: ANM-ttb1000-30px;animation-fill-mode: forwards;transform: translateY(-30px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-30px{0%{transform: translateY(-30px);}100%{transform: translateY(0);}} .ANM-btt1000-30px{animation-name: ANM-btt1000-30px;animation-fill-mode: forwards;transform: translateY(30px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-30px{0%{transform: translateY(30px);}100%{transform: translateY(0);}} .ANM-ltr1000-30px{animation-name: ANM-ltr1000-30px;animation-fill-mode: forwards;transform: translateX(-30px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-30px{0%{transform: translateX(-30px);}100%{transform: translateX(0);}} .ANM-rtl1000-30px{animation-name: ANM-rtl1000-30px;animation-fill-mode: forwards;transform: translateX(30px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-30px{0%{transform: translateX(30px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 30px animation ----------- */ .ANM-ttb1000-op-30px{animation-name: ANM-ttb1000-op-30px;animation-fill-mode: forwards;transform: translateY(-30px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-op-30px {0%{transform: translateY(-30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt1000-op-30px{animation-name: ANM-btt1000-op-30px;animation-fill-mode: forwards;transform: translateY(30px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-op-30px {0%{transform: translateY(30px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr1000-op-30px{animation-name: ANM-ltr1000-op-30px;animation-fill-mode: forwards;transform: translateX(-30px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-op-30px {0%{transform: translateX(-30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl1000-op-30px{animation-name: ANM-rtl1000-op-30px;animation-fill-mode: forwards;transform: translateX(30px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-op-30px {0%{transform: translateX(30px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 40px animation ----------- */ .ANM-ttb1000-40px{animation-name: ANM-ttb1000-40px;animation-fill-mode: forwards;transform: translateY(-40px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-40px{0%{transform: translateY(-40px);}100%{transform: translateY(0);}} .ANM-btt1000-40px{animation-name: ANM-btt1000-40px;animation-fill-mode: forwards;transform: translateY(40px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-40px{0%{transform: translateY(40px);}100%{transform: translateY(0);}} .ANM-ltr1000-40px{animation-name: ANM-ltr1000-40px;animation-fill-mode: forwards;transform: translateX(-40px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-40px{0%{transform: translateX(-40px);}100%{transform: translateX(0);}} .ANM-rtl1000-40px{animation-name: ANM-rtl1000-40px;animation-fill-mode: forwards;transform: translateX(40px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-40px{0%{transform: translateX(40px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 40px animation ----------- */ .ANM-ttb1000-op-40px{animation-name: ANM-ttb1000-op-40px;animation-fill-mode: forwards;transform: translateY(-40px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-op-40px {0%{transform: translateY(-40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt1000-op-40px{animation-name: ANM-btt1000-op-40px;animation-fill-mode: forwards;transform: translateY(40px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-op-40px {0%{transform: translateY(40px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr1000-op-40px{animation-name: ANM-ltr1000-op-40px;animation-fill-mode: forwards;transform: translateX(-40px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-op-40px {0%{transform: translateX(-40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl1000-op-40px{animation-name: ANM-rtl1000-op-40px;animation-fill-mode: forwards;transform: translateX(40px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-op-40px {0%{transform: translateX(40px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 50px animation ----------- */ .ANM-ttb1000-50px{animation-name: ANM-ttb1000-50px;animation-fill-mode: forwards;transform: translateY(-50px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-50px{0%{transform: translateY(-50px);}100%{transform: translateY(0);}} .ANM-btt1000-50px{animation-name: ANM-btt1000-50px;animation-fill-mode: forwards;transform: translateY(50px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-50px{0%{transform: translateY(50px);}100%{transform: translateY(0);}} .ANM-ltr1000-50px{animation-name: ANM-ltr1000-50px;animation-fill-mode: forwards;transform: translateX(-50px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-50px{0%{transform: translateX(-50px);}100%{transform: translateX(0);}} .ANM-rtl1000-50px{animation-name: ANM-rtl1000-50px;animation-fill-mode: forwards;transform: translateX(50px);animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-50px{0%{transform: translateX(50px);}100%{transform: translateX(0);}} /* Animation Opacity 0 To 100 , 50px animation ----------- */ .ANM-ttb1000-op-50px{animation-name: ANM-ttb1000-op-50px;animation-fill-mode: forwards;transform: translateY(-50px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ttb1000-op-50px {0%{transform: translateY(-50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-btt1000-op-50px{animation-name: ANM-btt1000-op-50px;animation-fill-mode: forwards;transform: translateY(50px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-btt1000-op-50px {0%{transform: translateY(50px);opacity: 0;}100%{transform: translateY(0);opacity: 1;}} .ANM-ltr1000-op-50px{animation-name: ANM-ltr1000-op-50px;animation-fill-mode: forwards;transform: translateX(-50px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-ltr1000-op-50px {0%{transform: translateX(-50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} .ANM-rtl1000-op-50px{animation-name: ANM-rtl1000-op-50px;animation-fill-mode: forwards;transform: translateX(50px);opacity: 0;animation-duration: 1000ms;animation-timing-function: ease;} @keyframes ANM-rtl1000-op-50px {0%{transform: translateX(50px);opacity: 0;}100%{transform: translateX(0);opacity: 1;}} /* Animation 1000ms End---------------------------------------------------------------------------------------------------------------------------------------------------- */