Problème d'animation

Bonjour j'ai commencer à chipoter avec les anim css3 , mais voila que se présente à moi un problème plutôt embétant ... Voici le problème , j'ai fait mon anim tout ça tout ça mais dès que je note :hover dans le css qui doit être animer au survol ... ben en fait l'icone concerner disparais et je ne sais pas le voir tant que :hover est dans le css ... rien a faire je ne trouve pas la solution. auriez-vous une petite aide pour moi ? merci d'avance , voici les codes html et css concerné

<div class="connection-bar"></div>
              <div class="design-bar"></div>
                      <div class="social">
                                <div class="yt"><a href="#"></a></div>
                                <div class="fb"><a href="#"></a></div>
                                <div class="tt"><a href="#"></a></div>
                      </div>
      

et ls css

.social{
  width:120px;
  height:30px;
  
  z-index:2; 
  position:absolute;
  top:42px;
  left:1650px;
  position:fixed;
}
.yt a{
  position:absolute;
  top:0px;
  left:0px;  
  background:url("images/icone-youtube-top.png");
  
}
.fb a{  
  position:absolute;
  top:0px;
  left:40px;  
  background:url("images/icone-facebook-top.png");  
}
.tt a{  
  position:absolute;
  top:0px;
  left:80px;  
  background:url("images/icone-twitter-top.png");  
}

.yt a, .fb a, .tt a{
  /*overflow:hidden;*/
  float:left;
  width:30px;
  height:30px; 
  display:block;  
  box-shadow:3px 2px 10px black;

  
  -moz-animation: topless 1s infinite ease-in-out;
    -webkit-animation: topless 1s infinite ease-in-out;
      -o-animation: topless 1s infinite ease-in-out;
          -ms-animation: topless 1s infinite ease-in-out;
}
@-moz-keyframes topless
{
  0% {
    top:0px;
  }
  50%{
    top:13px;
  }
  100% {
    top:0px;
  }
}

Modifié par evengyl (19 Apr 2013 - 03:02)

Bonjour,

Il y a sûrement de l'optimisation css à faire (left:1650px, vraiment ? ), mais c'est un autre débat

Après avoir défini les styles de vos liens, vous déclarez l'animation au survol de ces derniers, et il ne devrait pas y avoir de souci :

.yt a,.fb a,.tt a {  
  position:absolute;  
  width:30px;  
  height:30px;   
  display:inline-block;    
  box-shadow:3px 2px 10px black;
  }
.yt a {  top:0px; left:0px;background:url("images/icone-youtube-top.png");}
.fb a {  top:0px; left:40px;background:url("images/icone-facebook-top.png");}
.tt a {  top:0px; left:80px;background:url("images/icone-twitter-top.png");}
.yt a:hover, .fb a:hover, .tt a:hover{  
  -moz-animation: topless 1s infinite ease-in-out;  
  -webkit-animation: topless 1s infinite ease-in-out;  
  -o-animation: topless 1s infinite ease-in-out;  
  -ms-animation: topless 1s infinite ease-in-out;
}
@-moz-keyframes topless
{
  0% {
    top:0px;
  }
  50%{
    top:13px;
  }
  100% {
    top:0px;
  }
}

merci ! tout marche niquel , merci de ta réponse , je veillerai à l'optimisation quand tout le css sera fini merci quand même de me le rappeler