Template:Appearing Text Effect

Fades multiple lines one-by-one without JavaScript. Use line1, line2, etc.

Template parameters[Edit template data]

This template prefers inline formatting of parameters.

Parameter		Description	Type	Status
Line 1	line1	no description	String	optional
Line 2	line2	no description	String	optional
Line 3	line3	no description	String	optional
Text Color	color	no description Default #ffffff	String	optional
Font Family	font	no description Default var(--font-family-citizen-serif)	String	optional
Font Size	fontsize	no description Default 16px	String	optional
Glow	glow	no description Default yes	String	optional
Glow Color	glowcolor	no description Default #ccc	String	optional
Alignment	align	no description Default center	String	optional
Position	position	no description Default top: 0;	String	optional
Animation Speed	speed	no description Default 2s	String	optional
Repeat Count	repeat	no description Default 1	String	optional
Fade After	fadeout	no description Default no	String	optional
Fade Direction	fadefrom	no description Default center	String	optional

{{#vardefine: speed | 1.5s }} {{#vardefine: font | var(--font-family-citizen-serif) }} {{#vardefine: size | 16px }} {{#vardefine: color | #00ffcc }} {{#vardefine: glow | yes }} {{#vardefine: glowcolor | #ccc }} {{#vardefine: fadeout | yes }} {{#vardefine: fadefrom | left }} {{#vardefine: repeat | 1 }}

The

<span class="appear-effect fade-{{#var:fadefrom}} " style="display:block; opacity:0; animation-delay:s; animation-duration:{{#var:speed}}; animation-iteration-count:{{#var:repeat}}; font-family:{{#var:font}}; font-size:{{#var:size}}; color:{{#var:color}}; text-shadow:none; ">Then

<span class="appear-effect fade-{{#var:fadefrom}} " style="display:block; opacity:0; animation-delay:s; animation-duration:{{#var:speed}}; animation-iteration-count:{{#var:repeat}}; font-family:{{#var:font}}; font-size:{{#var:size}}; color:{{#var:color}}; text-shadow:none; ">Final