Untitled

 avatar
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