Comment faire clignoter une div seulement en CSS ?

Bonjour, peut on faire clignoter une div seulement avec du CSS ? J'aimerai que cette div clignote de deux couleurs.

Code:

---

1 2 3 4 5 6 7

.chat-window .msg-container-base .notification-message-unread{ float: right; font-size: 10px; color: #666; background: white; padding-left: 10px; }

---

Merci d'avance :)

Je vois pas trop ce qu'on peut faire avec ton css, un peu plus de code et avec du html aurait été super.
Mais regarde et adapte avec cet exemple:
https://codepen.io/JefReb/pen/qXdmLm
Il y a plusieurs façons d'y arriver de toute façon, Z-index, display:none, opacity etc. et un @keyframe a utiliser.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

* { box-sizing:border-box;} .feu { width: 120px; height: 120px; margin-top:50px; background-color:#999; border-radius: 15px; border: 3px solid black; } .noir, .rouge{ width: 100px; height: 100px; border-radius: 50px; } .noir { margin:10px; background-color: black; } .rouge { position: relative; background-color:red; animation: rouge 0.5s infinite; } @keyframes rouge { 0% { z-index:-1; } 100% { z-index:1; } }

---

Code:

---

1 2 3

<div class="feu"> <div class="noir"><div class="rouge"></div></div> </div>

---

Bonjour,

sacré JefReb et ses usines à gaz... :scarymov:
Relis la question.
On parle d'un seul div (avec un font-size, donc certainement avec du texte)
L'exemple du "feu clignotant CSS" est intéressant, mais pas forcément adapté.

1/ Pour faire clignoter la couleur du texte :

Code:

---

1 2 3

<div class="blink"> Hello the World </div>

---

Code:

---

1 2 3 4 5 6 7 8

.blink { color:red; animation: colorblink 2s infinite; } @keyframes colorblink { 0% { } 50% { color:green; } }

---

2/ Pour faire clignoter l'arrière plan, remplacer color par background-color...

3/ ... ou les deux :

Code:

---

1 2 3 4 5 6 7 8

.blink { color:red; background-color:pink; animation: allblink 2s infinite; } @keyframes allblink { 0% { } 50% { color:green; background-color:lightgreen; } }

---

4/ ...ou juste sur le :hover :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.blink { color:green; background-color:transparent; } .blink:hover { color:red; background-color:pink; animation: allblink 2s infinite; } @keyframes allblink { 0% { } 50% { color:green; background-color:lightgreen; } }

---

CQFD.


La phrase du jour :

Citation:

---

Ne pas confondre :
"Avoir l'embarras du choix"
et
"Avoir le choix de l'embarras"

---

Bon d'accord, j'ai pris le premier bout de code que j'avais sous la main, mais comme je l'ai écrit, il nous aurait donné un peu plus que ce css qui ne servait strictement à rien cela aurait pu aider.
le même sans usine à gaz ...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.blink { width:100px; height:100px; border-radius:50px; background-color:black; animation: colorblink 2s infinite; } @keyframes colorblink { 0% { background-color:red; } 100% { background-color:black; } }

---

Code:

---

<div class="blink"></div>

---

Là, tu ne fais que rajouter de la "déco" à mon code (sauf qu'il faut remplacer 100 % par 50%) !

Allez, une dernière (?) pour la route :

Code:

---

1 2 3

<div class="blink"> Hello the World </div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.blink { padding:30px; border-radius:50%; display:table-cell; vertical-align:middle; text-align:center;   color:red; background-color:pink; animation: allblink 2s infinite; } @keyframes allblink { 0% { } 50% { color:green; background-color:lightgreen; } }

---

... Mais le mieux est d'attendre que Floriane PRECISE SON BESOIN...

Merci beaucoup pour vos réponses, cela fonctionne :)