Discussion :

[supcomingenieur]

Bonjour,
J'ai suivi les étapes qui se se trouve à ce lien http://www.basical.fr/css/clignoter-bouton-css3/# pour faire clignoter un petit cercle qui indique à un utilistateur qu'il est connecté. Mais l'animation ne fontionne pas. Voici mon code CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
#etat{
background:#009900; 
border-radius:50%;
width:10px;
height:10px;
position:absolute;
bottom:15px;
border: 1px solid #bfd70e;
left:14%;
padding: 5px 5px;
box-shadow:0px 0px 10px #679403;
-webkit-animation-name: clignote; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes clignote {
0%{box-shadow:0px 0px 10px #4183C4;}
50%{box-shadow:0px 0px 0px #4183C4;}
100%{box-shadow:0px 0px 10px #4183C4;}
}

merci

[Bovino]

Tu le testes peut-être dans Firefox...

[rodolphebrd]

Bonjour,

Ça fonctionne parfaitement...sous safari et Chrome.

Sinon il faut préfixer.

Edit: pas vu @Bovino

[supcomingenieur]

Oui je suis sous firefox, mais j'ai réalisé d'autres animations et ça a fonctionné.
9a veut dire quoi préfixer?

[supcomingenieur]

J'ai préfixé avec "moz" mais ça ne fonctionne toujours pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
#etat{
background:#009900;
border-radius:50%;
width:10px;
height:10px;
position:absolute;
bottom:15px;
border: 1px solid #bfd70e;
left:14%;
padding: 5px 5px;
box-shadow:0px 0px 10px #679403;
-webkit-animation-name: clignote; 
-webkit-animation-duration: 1s; 
-webkit-animation-iteration-count:infinite;
 
-moz-animation-name: clignote; 
-moz-animation-duration: 1s; 
-moz-animation-iteration-count:infinite;
}

[Bovino]

Est-ce que tu essayes au moins de comprendre ce que tu fais ?
Observe ton code et tu devrais (du moins je l'espère) comprendre ce qu'il manque !

[supcomingenieur]

je me corrige il fallait ajouter ça aussi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
@-moz-keyframes clignote {
0%{box-shadow:0px 0px 10px #009900;}
50%{box-shadow:0px 0px 0px #009900;}
100%{box-shadow:0px 0px 10px #009900;}

merci a tous