CSS for Typewriter Effect

Cesar Banchio Updated by Cesar Banchio

This article will help you create a Typewritter effect for the message blocks using CSS.

You need to copy the following CSS and paste it in the Design Section >> Custom CSS:

body {

font-family: monospace;

font-weight: 700;

padding:20px;

background:#ffffff;

color:#0000

}

.type {

color:#0000;

background:

linear-gradient(-90deg,#FFFFFF 5px,#0000 0) 10px 0,

linear-gradient(#FFFFFF 0 0) 0 0;

background-size:calc(var(--n)*1ch) 200%;

-webkit-background-clip:padding-box,text;

background-clip:padding-box,text;

background-repeat:no-repeat;

animation:

b 5.5s infinite steps(1),

t calc(var(--n)*.06s) steps(var(--n)) forwards;

font-size: 18px;

}

@keyframes t{

from {background-size:0 200%}

}

@keyframes b{

50% {background-position:0 -100%,0 0}

}

On each text that we want this effect to appear, we need to wrap the text on this HTML tag:

<span class="type" style="--n:#">Sample text</span>

You will need to replace the # for the number of characters the text has. So on the example above, the message block would look like this:

To adjust some settings, like the speed of the animation, you need to modify this line of the CSS:

t calc(var(--n)*.05s) steps(var(--n)) forwards;

replacing the .05s to the number you want.

How did we do?

Form Block CSS

CSS Customization Examples: Carrd Embed Beginner

Contact