0

Buenaas, necesito ayudaa. Quiero hacer un efecto typing pero al revés. me explico, tengo ya un efecto typing que va desde width 0 hasta el width del string. El tema es que quiero que al llegar al final del recorrido, despues de aprox 5 o 3 segundos, el efecto se haga a la inversa haciendo desaparecer las letras para luego hacer aparecer otra frase de la misma manera, y que el typing al revés la haga desaparecer y así en bucle. adjunto mi codigo:

    .me span {
    display: block;
    font-family: monospace;
    white-space: nowrap;
    border-right: 4px solid;
    width: 17ch;
    animation: typing 2s steps(12), blink .5s infinite step-end alternate;
    overflow: hidden;

    position: relative;
    top: 10px;
    font-size: 2.5em;
}

@keyframes typing {
    from {width: 0}
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

gracias por su tiempo y respuestas.

1 respuesta 1

1

         .me span {
    display: block;
    font-family: monospace;
    white-space: nowrap;
    border-right: 4px solid;
    width: 17ch;
    animation: typing 2s steps(12) alternate infinite, blink .5s infinite step-end alternate;
    overflow: hidden;

    position: relative;
    top: 10px;
    font-size: 2.5em;
}

@keyframes typing {
    from {width: 0}
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}
<div id="me"><span>HOLA MUNDO!</span></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.