Animation typing

Utilité Donner un mouvement machine à écrire
Infos utiles Une animation un peu bling bling qui permet d'afficher un intitulé lettre par lettre avec un curseur qui clignote comme un prompteur

Rappel : Les animations doivent être utilisées avec parcimomie, car elles rendent la lecture plus difficile. Elles réduisent donc l'accessibilité de vos pages.
Exemple de code 
h1 {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid transparent; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation:
        typing 3.5s steps(26, end),
        blink-caret .75s step-end ;
}

/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }

}

/* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent ;}
    50% { border-color: var(--secondary-color-1); }
    100% { border-color: transparent; }

}
Langage CSS
PDF