Pura escritura de texto CSS animación

Vista prévia

Descripción

Sólo otra implementación CSS pura de la animación de escritura de texto utilizando pseudo elementos y animaciones CSS3. También se puede utilizar como un rotador de texto con un efecto de mecanografía de caracteres.

Funcionamiento

Envuelve tu texto en elementos de span siguiendo la estructura como esta:

<p class="demo">

<span class="demo-item"><span class="demo-item_inner">CSS3</span></span>

<span class="demo-item"><span class="demo-item_inner">JavaScript</span></span>

<span class="demo-item"><span class="demo-item_inner">HTML5</span></span>
</p>

Los estilos principales de CSS/CSS3.

.demo,
.demo-item {

height: 80px;
}

.demo {

overflow: hidden;

background-color: #2a2a28;

color: #fff;
}

.demo-item {

position: relative;

font-size: 1.5em;

padding-top: .75em;

animation: animatetotop 6s steps(3) infinite;
}

.demo-item_inner,
.demo-item-overlay {

display: inline-block;
}

.demo-item_inner {

position: relative;

line-height: 1;
}

.demo-item_inner:after {


 content: "";

position: absolute;

top:-1px;right:0;bottom:-2px;left:0;

border-left: 1px solid #fff;

background-color: #2a2a28;

animation: animatetoright 1s steps(10) infinite alternate;
}

Crea el texto escribiendo & animaciones rotativas en el CSS.

@keyframes animatetoright {

0% {


left: 0;


margin-right: auto;

}

100% {


left: 100%;


margin-left: .6em;


margin-right: -.6em;

}
}

@keyframes animatetotop {

0% {


top: 0;

}

100% {


top: -240px;

}
}