Animation ne marche pas sur une infobulle en css3

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Animation ne marche pas sur une infobulle en css3

Message par Cinderella. Jeu 10 Mai 2012 - 22:36

Bonsoir à tous Smile

Je cherche depuis quelques temps à faire des infobulles en css3, j'ai testé un tuto trouvé sur ce site :
http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS
J'ai suivi toutes les étapes, les infobulles noires s'affichent bien sur mon site, mais aucun effet de transition si animation, tout s'anime comme de bêtes infobulles.
Voici mon code HTML et mon CSS pour ceux qui se poseraient la question Smile

Code:
<a class="bullenoir" href="http://once-upon-a-time.1talk.net/u2"><img src="http://img11.hostingpics.net/pics/789460ouatpa201.png" />
 <span>Super Admin</span>
    </a>

Code:
a.bullenoir span{
    position:absolute;
  opacity:0;
  margin-top:23px;
    margin-left:-35px;
  color:#09c;
    background:rgba(0,0,0,.9);
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
  transform:scale(0) rotate(-12deg);
    transition:all .25s;
}

a.bullenoir:hover span, a.bullenoir:focus span {opacity:1; transform:scale(1) rotate(0); }

Un grand merci par avance, je n'ai rien trouvé pour résoudre ce problème jusqu'à présent :/


Dernière édition par Cinderella. le Ven 11 Mai 2012 - 8:22, édité 1 fois
Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

Cinderella. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation ne marche pas sur une infobulle en css3

Message par Shadows du 78 Jeu 10 Mai 2012 - 22:41

hmm je mettrais une virgule entre "a.bullenoir" et "span".

Code:
a.bullenoir, span{ 

...

}

Ou bien

Code:
        <a class="bullenoir" href="http://once-upon-a-time.1talk.net/u2"><img src="http://img11.hostingpics.net/pics/789460ouatpa201.png" />
        <span class="bullenoir">Super Admin</span>
            </a>

Code:
.bullenoir{

...

}
Shadows du 78

Shadows du 78
****

Masculin
Messages : 254
Inscrit(e) le : 28/09/2007

http://blog.milanricoul.com/
Shadows du 78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation ne marche pas sur une infobulle en css3

Message par Bloody Hope Jeu 10 Mai 2012 - 22:46

Bonsoir

Ca peut venir de ton navigateur je crois.

J'avais un effet de transition, et j'ai dû rajouter des balises spécifiques aux navigateurs :

webkit-transition:
-moz-transition:
-o-transition :

Donc teste voir ainsi. Pour le reste, si cela ne suffit pas, je ne peux pas t'aider.
Bloody Hope

Bloody Hope
*

Féminin
Messages : 41
Inscrit(e) le : 02/05/2012

http://nozomi.forumactif.fr/
Bloody Hope a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation ne marche pas sur une infobulle en css3

Message par Cinderella. Jeu 10 Mai 2012 - 22:51

Merci pour cette réponse rapide Very Happy
Dans le premier cas, il me modifie tous mes <span> (dans ma PA) et non uniquement le <span> lié à la class "bullenoir".
Dans le deuxième cas, il me supprime mon image porteuse du lien <a>

Merci tout de même pour ces idées Clin d\'oeil

Bloody Hope : J'ai ajouté ces préfixes sur toutes mes valeurs, et il me semble que ça marche Very Happy
Un grand merci Smile
Le seul élément qui ne marche toujours pas est le bout de la bulle (comme une bulle de BD) ici http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS
Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

Cinderella. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation ne marche pas sur une infobulle en css3

Message par Bloody Hope Jeu 10 Mai 2012 - 22:57

De rien

Comme dit, pour autre chose je suis incapable de t'aider, donc je pense qu'une personne plus compétente passera bientôt t'aider =).
Bloody Hope

Bloody Hope
*

Féminin
Messages : 41
Inscrit(e) le : 02/05/2012

http://nozomi.forumactif.fr/
Bloody Hope a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation ne marche pas sur une infobulle en css3

Message par Adam_sfp Ven 11 Mai 2012 - 7:33

Bonjour

Essayez en rajoutant ceci dans le CSS pour le petit triangle.
Code:
a span::before{
content:'';
position:absolute;
top:-6px;
left:10px;
width:0;
height:0;
border-bottom:6px solid rgba(0,0,0,.9);
border-left:6px solid transparent;
border-right:6px solid transparent;
}
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Animation ne marche pas sur une infobulle en css3

Message par Cinderella. Ven 11 Mai 2012 - 8:22

C'est parfait !
Merci beaucoup à tout ceux qui m'ont aidé dans mes démarches, le sujet est résolu.
Cinderella.

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

Cinderella. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum