CSS3 : Keyframe qui fonctionne pas

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

Résolu CSS3 : Keyframe qui fonctionne pas

Message par pandorabox le Ven 11 Mai 2012 - 11:15

Bonjour à tous,

Je désire faire une animation de ma bannière en CSS3 sur mon forum. Rien de bien méchant juste changer l'opacité de cette dernier sur un délai de 10 seconde.

voici mon code CSS :

Code:

@keyframes texte_anim {   
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
@-webkit-keyframes texte_anim {   
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
   
    @-moz-keyframes texte_anim {   
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
   
    @-o-keyframes texte_anim {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
    }
#i_logo{
  opacity:0.9;
  animation: texte_anim 10s infinite linear;
  -webkit-animation: texte_anim 10s infinite linear;
    -moz-animation: texte_anim 10s infinite linear;
    -o-animation: texte_anim 10s infinite linear;
  border:1px solid #000000;
}

comme vous le constaté je la fait apparaitre et disparaitre de manière infinie pour le moment durant mes tests.

Mais le seul hic et que j'ai l'impression que le forum ne tiend pas compte des valeur Keyframe et le résultat est que rien ne se passe.

en analysent le CSS généré je constate qu'il fait disparaitre une partie de mon code voici ce qui est généré
Code:
body
{
background-color:#e5e5e5;background-position:-550px 0;background-repeat:no-repeat;margin-top:215px;right:auto
}
50%{opacity:0}100%{opacity:1}
#i_logo{
-moz-animation:texte_anim 10s infinite linear;-o-animation:texte_anim 10s infinite linear;-webkit-animation:texte_anim 10s infinite linear;animation:texte_anim 10s infinite linear;border:1px solid #000;opacity:.9
}

comment puis je faire pour résoudre ce petit souci ?

PS : j'ai tester mon code sur une page HTML vierge avec juste l'image et le CSS directement copier dedans sa fonctionne parfaitement.

d'avance merci


Dernière édition par pandorabox le Mar 15 Mai 2012 - 17:45, édité 1 fois

pandorabox
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 11/05/2012

http://apologies.forumactif.com
pandorabox a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS3 : Keyframe qui fonctionne pas

Message par Scoubifitz le Ven 11 Mai 2012 - 16:03

bonjour,

le code que vous proposez fonctionne parfaitement ...

mais il est différent de celui du CSS du forum de votre porfil ...


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS3 : Keyframe qui fonctionne pas

Message par pandorabox le Lun 14 Mai 2012 - 15:39

s'est bien sa le problème. le code proposé n'ai pas convenablement repris dans le css généré par le forum. alors que dans la partie admin j'ai fait un copier coller du code correct

pandorabox
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 11/05/2012

http://apologies.forumactif.com
pandorabox a été remercié(e) par l'auteur de ce sujet.

Résolu Re: CSS3 : Keyframe qui fonctionne pas

Message par AenigmA le Lun 14 Mai 2012 - 16:24

Bonjour, essaie sans optimiser ton css car ça fonctionne très bien.

AenigmA
+ Hyperactif +

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

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

Résolu Re: CSS3 : Keyframe qui fonctionne pas

Message par pandorabox le Mar 15 Mai 2012 - 17:45

cheers merci le truc très con auquel on pense pas forcément. encore merci

pandorabox
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 11/05/2012

http://apologies.forumactif.com
pandorabox 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