Table des matières
Comment changer le contenu d'un élément avec CSS ?
En HTML, pour modifier le contenu d'un élément, nous serions tenté d'insérer du texte à l'intérieur de ses balises. Comme dans cet exemple:
<p>Voici mon contenu</p>
Et nous pourions changer le contenu de ce paragraphe en utilisant javascript pour le sélectionner parmi les éléments du DOM et de modifier son innerText.
Mais ici, nous voulons effectuer cette animation avec seulement du CSS. Nous allons donc laisser le contenu de notre élément vide, comme ceci:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="typing-text"></div>
</body>
</html>
Et nous allons attacher un pseudo-élément after à notre élément avec la propriété CSS content.
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}
#typing-text::after {
content: 'développeur';
font-size: 42px;
font-family: monospace;
}
Nous pouvons voir que le texte développeur s'affiche bien et que nous avons réussi à afficher du texte avec notre élément.
Maintenant, nous voulons modifier ce texte avec l'aide du CSS uniquement, pour cela, nous allons rajouter une animation à notre élément.
#typing-text::after {
[...]
animation: change-text 5s infinite;
}
@keyframes change-text {
from { content: 'développeur'; }
25% { content: 'enthousiaste'; }
50% { content: 'curieux'; }
75% { content: 'passionné'; }
to { content: 'développeur'; }
}
Nous devrions obtenir le résultat suivant:
Aller plus loin, simuler l'écriture d'un texte
Si nous rajoutons des étapes à notre animation, il nous est possible, lettre par lettre, de simuler l'écriture qu'un humain ferait sur un clavier.
Nous pouvons modifier l'animation comme ceci et jouer sur les valeurs des étapes pour ajouter un côté plus réaliste et moins linéaire à l'animation.
#typing-text::after {
[...]
animation: write-text 10s infinite;
}
@keyframes write-text {
0% { content: 'e'; }
1% { content: 'en'; }
2% { content: 'ent'; }
3% { content: 'enth'; }
5% { content: 'entho'; }
6% { content: 'enthou'; }
7% { content: 'enthous'; }
9% { content: 'enthousi'; }
10% { content: 'enthousia'; }
11% { content: 'enthousias'; }
12% { content: 'enthousiast'; }
13% { content: 'enthousiaste'; }
20% { content: 'enthousiast'; }
21% { content: 'enthousias'; }
22% { content: 'enthousia'; }
23% { content: 'enthousi'; }
24% { content: 'enthous'; }
25% { content: 'enthou'; }
26% { content: 'entho'; }
27% { content: 'enth'; }
28% { content: 'ent'; }
29% { content: 'en'; }
30% { content: 'e'; }
31% { content: ''; }
35% { content: 'c'; }
36% { content: 'cu'; }
36% { content: 'cur'; }
37% { content: 'curi'; }
38% { content: 'curie'; }
40% { content: 'curieu'; }
41% { content: 'curieux'; }
49% { content: 'curieu'; }
50% { content: 'curie'; }
51% { content: 'curi'; }
53% { content: 'cur'; }
53% { content: 'cu'; }
54% { content: 'c'; }
55% { content: ''; }
65% { content: 'p'; }
66% { content: 'pa'; }
67% { content: 'pas'; }
68% { content: 'pass'; }
69% { content: 'passi'; }
71% { content: 'passio'; }
72% { content: 'passion'; }
73% { content: 'passionn'; }
74% { content: 'passionné'; }
86% { content: 'passionn'; }
87% { content: 'passion'; }
88% { content: 'passio'; }
89% { content: 'passi'; }
90% { content: 'pass'; }
91% { content: 'pas'; }
92% { content: 'pa'; }
93% { content: 'p'; }
100% { content: ''; }
}
Et voici le résultat:
