Untitled
unknown
plain_text
5 months ago
1.8 kB
4
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