Template:Appearing Text Effect/styles.css - Revision history

Tesinormed at 04:36, September 18, 2025

2025-09-18T04:36:00Z

← Older revision		Revision as of 04:36, September 18, 2025
Line 15:		Line 15:
	/* Wrapper and Base Animation Classes */		/* Wrapper and Base Animation Classes */
	.appear-effect {		.appear-effect {
	content-visibility: ~~visible~~;		content-visibility: hidden;
	width: fit-content;		width: fit-content;
	animation-fill-mode: forwards;		animation-fill-mode: forwards;

Tesinormed at 04:26, September 18, 2025

2025-09-18T04:26:32Z

← Older revision		Revision as of 04:26, September 18, 2025
Line 15:		Line 15:
	/* Wrapper and Base Animation Classes */		/* Wrapper and Base Animation Classes */
	.appear-effect {		.appear-effect {
	content-visibility: ~~hidden~~;		content-visibility: visible;
	width: fit-content;		width: fit-content;
	animation-fill-mode: forwards;		animation-fill-mode: forwards;

Tesinormed at 04:23, September 18, 2025

2025-09-18T04:23:49Z

← Older revision		Revision as of 04:23, September 18, 2025
Line 67:		Line 67:
	@keyframes appear-disappear {		@keyframes appear-disappear {
	0% {		0% {
	content-visibility: ~~hidden~~;		content-visibility: visible;
	opacity: 0;		opacity: 0;
	transform: scale(0.95);		transform: scale(0.95);
Line 73:		Line 73:

	50% {		50% {
	content-visibility: visible;
	opacity: 1;		opacity: 1;
	}		}

Tesinormed: Undo revision 176126 by Tesinormed (talk)

2025-09-18T04:22:22Z

Undo revision 176126 by Tesinormed (talk)

← Older revision		Revision as of 04:22, September 18, 2025
Line 73:		Line 73:

	50% {		50% {
			content-visibility: visible;
	opacity: 1;		opacity: 1;
	}		}
Line 97:		Line 98:

	/* Fade After Appear */		/* Fade After Appear */
			.fade-away {
			animation-fill-mode: both;
			}

	.fade-center.fade-away {		.fade-center.fade-away {
	animation-name: fade-center, appear-disappear;		animation-name: fade-center, appear-disappear;

Tesinormed at 04:21, September 18, 2025

2025-09-18T04:21:37Z

← Older revision		Revision as of 04:21, September 18, 2025
Line 97:		Line 97:

	/* Fade After Appear */		/* Fade After Appear */
	.fade-away {
	animation-fill-mode: both;
	}

	.fade-center.fade-away {		.fade-center.fade-away {
	animation-name: fade-center, appear-disappear;		animation-name: fade-center, appear-disappear;

Tesinormed at 04:20, September 18, 2025

2025-09-18T04:20:55Z

← Older revision		Revision as of 04:20, September 18, 2025
Line 15:		Line 15:
	/* Wrapper and Base Animation Classes */		/* Wrapper and Base Animation Classes */
	.appear-effect {		.appear-effect {
		⚫	content-visibility: hidden;
	display: none;
	width: fit-content;		width: fit-content;
	animation-fill-mode: forwards;		animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;		animation-timing-function: ease-in-out;
	transition-behavior: allow-discrete;
	}		}

Line 25:		Line 24:
	@keyframes fade-center {		@keyframes fade-center {
	0% {		0% {
		⚫	content-visibility: hidden;
	display: block;
⚫	content-visibility: ~~visible~~;
	opacity: 0;		opacity: 0;
	transform: scale(0.95);		transform: scale(0.95);
Line 32:		Line 30:

	100% {		100% {
	display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 1;		opacity: 1;
Line 41:		Line 38:
	@keyframes fade-left-to-right {		@keyframes fade-left-to-right {
	0% {		0% {
		⚫	content-visibility: hidden;
	display: block;
⚫	content-visibility: ~~visible~~;
	opacity: 0;		opacity: 0;
	transform: translateX(-50%);		transform: translateX(-50%);
Line 48:		Line 44:

	100% {		100% {
	display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 1;		opacity: 1;
Line 57:		Line 52:
	@keyframes fade-right-to-left {		@keyframes fade-right-to-left {
	0% {		0% {
		⚫	content-visibility: hidden;
	display: block;
⚫	content-visibility: ~~visible~~;
	opacity: 0;		opacity: 0;
	transform: translateX(50%);		transform: translateX(50%);
Line 64:		Line 58:

	100% {		100% {
	display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 1;		opacity: 1;
Line 74:		Line 67:
	@keyframes appear-disappear {		@keyframes appear-disappear {
	0% {		0% {
			content-visibility: hidden;
	display: block;
⚫	content-visibility: ~~visible~~;
	opacity: 0;		opacity: 0;
	transform: scale(0.95);		transform: scale(0.95);
Line 85:		Line 77:

	100% {		100% {
	display: block;
	content-visibility: hidden;		content-visibility: hidden;
	opacity: 0;		opacity: 0;

Tesinormed at 04:15, September 18, 2025

2025-09-18T04:15:53Z

← Older revision		Revision as of 04:15, September 18, 2025
Line 19:		Line 19:
	animation-fill-mode: forwards;		animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;		animation-timing-function: ease-in-out;
			transition-behavior: allow-discrete;
	}		}

Tesinormed at 04:15, September 18, 2025

2025-09-18T04:15:28Z

← Older revision		Revision as of 04:15, September 18, 2025
Line 15:		Line 15:
	/* Wrapper and Base Animation Classes */		/* Wrapper and Base Animation Classes */
	.appear-effect {		.appear-effect {
			display: none;
	content-visibility: hidden;
	width: fit-content;		width: fit-content;
	animation-fill-mode: forwards;		animation-fill-mode: forwards;
Line 24:		Line 24:
	@keyframes fade-center {		@keyframes fade-center {
	0% {		0% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 0;		opacity: 0;
Line 30:		Line 31:

	100% {		100% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 1;		opacity: 1;
Line 38:		Line 40:
	@keyframes fade-left-to-right {		@keyframes fade-left-to-right {
	0% {		0% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 0;		opacity: 0;
Line 44:		Line 47:

	100% {		100% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 1;		opacity: 1;
Line 52:		Line 56:
	@keyframes fade-right-to-left {		@keyframes fade-right-to-left {
	0% {		0% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 0;		opacity: 0;
Line 58:		Line 63:

	100% {		100% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 1;		opacity: 1;
Line 67:		Line 73:
	@keyframes appear-disappear {		@keyframes appear-disappear {
	0% {		0% {
			display: block;
	content-visibility: visible;		content-visibility: visible;
	opacity: 0;		opacity: 0;
Line 77:		Line 84:

	100% {		100% {
			display: block;
	content-visibility: hidden;		content-visibility: hidden;
	opacity: 0;		opacity: 0;

Tesinormed at 04:13, September 18, 2025

2025-09-18T04:13:07Z

← Older revision		Revision as of 04:13, September 18, 2025
Line 15:		Line 15:
	/* Wrapper and Base Animation Classes */		/* Wrapper and Base Animation Classes */
	.appear-effect {		.appear-effect {
			content-visibility: hidden;
	display: none;
	width: fit-content;		width: fit-content;
	animation-fill-mode: forwards;		animation-fill-mode: forwards;

Tesinormed at 04:12, September 18, 2025

2025-09-18T04:12:18Z

← Older revision		Revision as of 04:12, September 18, 2025
Line 15:		Line 15:
	/* Wrapper and Base Animation Classes */		/* Wrapper and Base Animation Classes */
	.appear-effect {		.appear-effect {
			display: none;
	content-visibility: hidden;
	width: fit-content;		width: fit-content;
	animation-fill-mode: ~~both~~;		animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;		animation-timing-function: ease-in-out;
	}		}
Line 97:		Line 97:

	/* Fade After Appear */		/* Fade After Appear */
			.fade-away {
			animation-fill-mode: both;
			}

	.fade-center.fade-away {		.fade-center.fade-away {
	animation-name: fade-center, appear-disappear;		animation-name: fade-center, appear-disappear;