1

Existe alguna posibilidad de transcicionar entre dos o más lineas de texto usando un efecto typewrite baseado en keynotes de CSS? En anexo el css con las keynotes y una linea basica de html ligado a ella.

.typecontainer {
    width: 960px;
    margin: 50px auto;
}

.h7 {
    font-family: 'Inconsolata', monospace;
    font-size: 34px;
    color: dimgray;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    margin: 10px 0;
    animation: typing 4s steps(60) infinite alternate;
}

.h7:nth-child(2) {
    animation: typing-2 8s steps(60) infinite alternate;
}

@keyframes typing {
    from {width: 0;}
}

@keyframes typing-2 {
    0% {width: 0;}
    50% {width: 0;}
    100% {width: 100;}
}

@keyframes blink {
    to {opacity: .0;}
}

.cursor {
    animation: blink 1s infinite;
}

.heart {
    color: #ff7bac;
}
  <div class="typecontainer h7"><p class="h7">First<span class="cursor">|</span><</p>

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.