diff --git a/devias-web/src/Components/ItemStep/ItemStep.scss b/devias-web/src/Components/ItemStep/ItemStep.scss index b572fea..40d5160 100644 --- a/devias-web/src/Components/ItemStep/ItemStep.scss +++ b/devias-web/src/Components/ItemStep/ItemStep.scss @@ -57,7 +57,9 @@ max-height: 0; border-top: 0; overflow: hidden; - transition: max-height .35s ease-in-out; + transition: + max-height .35s ease-out, + border-top .35s ease; .step-description { color: #333; @@ -66,7 +68,7 @@ } &.show { - max-height: 500px; + max-height: 300px; border-top: 0.5px solid #9d9d9d40; } } diff --git a/devias-web/src/Screens/AboutUs/AboutUs.scss b/devias-web/src/Screens/AboutUs/AboutUs.scss index 555b0d4..f6c73c1 100644 --- a/devias-web/src/Screens/AboutUs/AboutUs.scss +++ b/devias-web/src/Screens/AboutUs/AboutUs.scss @@ -9,6 +9,7 @@ font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } h1{ font-size: 6rem; @@ -18,6 +19,7 @@ margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -33,6 +35,8 @@ } } .section-info{ + animation: slideDown 1.5s ease-in-out; + .container{ .container-card{ width: 100%; @@ -87,4 +91,26 @@ } } } +} + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } \ No newline at end of file diff --git a/devias-web/src/Screens/ContactUs/ContactUs.scss b/devias-web/src/Screens/ContactUs/ContactUs.scss index a842dc7..3de935e 100644 --- a/devias-web/src/Screens/ContactUs/ContactUs.scss +++ b/devias-web/src/Screens/ContactUs/ContactUs.scss @@ -13,6 +13,7 @@ font-size: 6rem; font-weight: 500; margin: 0; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -28,6 +29,7 @@ font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } @media (max-width: 991px) { @@ -46,9 +48,32 @@ align-items: center; gap: 10px; flex-wrap: wrap; + animation: slideDown 1.5s ease-in-out; @media all and (max-width: 768px) { flex-direction: column; } } } + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} diff --git a/devias-web/src/Screens/OurCustomers/OurCustomers.scss b/devias-web/src/Screens/OurCustomers/OurCustomers.scss index 453cb65..1a37c38 100644 --- a/devias-web/src/Screens/OurCustomers/OurCustomers.scss +++ b/devias-web/src/Screens/OurCustomers/OurCustomers.scss @@ -5,12 +5,14 @@ .container { .main-title { margin: 100px 0 64px 0; + h5 { font-size: 1.5rem; font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } h1 { @@ -21,6 +23,7 @@ margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -35,6 +38,8 @@ } .info { + animation: slideDown 1.5s ease-in-out; + .container { .container-card { width: 100%; @@ -112,4 +117,26 @@ } } } +} + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } \ No newline at end of file diff --git a/devias-web/src/Screens/OurWay/OurWay.scss b/devias-web/src/Screens/OurWay/OurWay.scss index 275b015..4fe0d53 100644 --- a/devias-web/src/Screens/OurWay/OurWay.scss +++ b/devias-web/src/Screens/OurWay/OurWay.scss @@ -13,6 +13,7 @@ font-size: 6rem; font-weight: 500; margin: 0; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -28,6 +29,7 @@ font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } @media (max-width: 991px){ @@ -52,6 +54,7 @@ .process-steps { margin: 95px 0px 115px 0px; + animation: slideDown 1.5s ease-in-out; } .services-cards { @@ -199,4 +202,26 @@ } } } +} + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } \ No newline at end of file