63 lines
1.2 KiB
CSS
63 lines
1.2 KiB
CSS
.text-animate {
|
|
opacity: 0;
|
|
transition: opacity 1s ease-in-out;
|
|
}
|
|
|
|
.text-animate.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.image-animate-left {
|
|
position: relative;
|
|
opacity: 0;
|
|
left: -100%;
|
|
transition: left 2s ease-in-out, opacity 2s ease-in-out;
|
|
}
|
|
|
|
.image-animate-left.visible {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.section-animate-left {
|
|
width: 100% margin-left: auto;
|
|
margin-right: auto;
|
|
opacity: 0;
|
|
left: -100%;
|
|
transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
|
|
position: relative;
|
|
}
|
|
|
|
.section-animate-left.visible {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.section-animate-right {
|
|
width: 100%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
|
|
position: relative;
|
|
}
|
|
|
|
.section-animate-right.visible {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.hero-area-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
|
|
.hero-area-hidden {
|
|
opacity: 0;
|
|
transform: translateY(-100%);
|
|
transition: opacity 0.3s ease-in-out, transform 0.8s ease-in-out;
|
|
} |