53 lines
982 B
CSS
53 lines
982 B
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;
|
|
}
|
|
|