Untitled
unknown
plain_text
a year ago
1.8 kB
5
Indexable
.animated {
visibility: hidden;
}
/* IMAGE CURTAIN ANIMATION CSS */
.bx-animation__image-wrapper {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
}
.bx-animation__image-wrapper img {
opacity: 0;
}
.bx-animation__curtain {
width: inherit;
height: 0%;
background: var(--c-black);
position: absolute;
animation: curtain-reveal forwards;
animation-duration: 1s !important;
z-index: 1;
}
.is-color-theme-dark .bx-animation__curtain {
background: var(--c-white);
}
.bx-animation__curtain-image {
opacity: 0;
animation: image-fade-in forwards;
animation-duration: 500ms !important;
animation-delay: 400ms;
}
.bx-remove_tab_content_animation .bx-animation__curtain {
width: inherit;
height: 100%;
background: none;
position: absolute;
animation: none;
animation-duration: 0 !important;
z-index: 1;
}
.bx-remove_tab_content_animation .bx-animation__curtain-image {
opacity: 1;
animation: none;
animation-duration: 0 !important;
animation-delay: 0;
}
.is-color-theme-dark .bx-remove_tab_content_animation .bx-animation__curtain {
background: none;
}
@keyframes curtain-reveal {
0% {
bottom: 0;
height: 0%;
}
50% {
bottom: 0;
height: 100%;
}
100% {
bottom: 100%;
height: 0%;
}
}
@keyframes image-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes image-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* TEXT ANIMATION CSS */
.bx-animation__fadeInUp {
opacity: 0;
animation-name: fadeInUp;
animation-duration: 500ms !important;
animation-fill-mode: both;
}
@keyframes fadeInUp {
from {
transform: translate3d(0, 40px, 0)
}
to {
transform: translate3d(0, 0, 0);
opacity: 1
}
}Editor is loading...
Leave a Comment