CSS3 Animation de position

Envisager CSS3 animation avec le navire se déplaçant au-dessus de bleu div. Pour une raison quelconque, le navire n'est pas en mouvement. Le HTML est comme suit:

<div id="wrapper">
  <div id="sea">
    <img src="ship.png" alt="ship" width="128" height="128"/>
  </div>
</div>

Afin de rendre CSS3 animation-je utiliser les éléments suivants:

#wrapper { position:relative;top:50px;width:700px;height:320px;
          margin:0 auto;background:white;border-radius:10px;}
#sea { position:relative;background:#2875DE;width:700px;height:170px;
       border-radius:10px;top:190px; }
#sea img { 
  position:relative;left:480px;top:-20px;
  animation:myship 10s;
  -moz-animation:myship 10s; /* Firefox */
  -webkit-animation:myship 10s; /* Safari and Chrome */
  @keyframes myship {
    from {left: 480px;} 
    to{left:20px;} 
   }
   @-moz-keyframes myship {
     from {left: 480px;} 
     to {left:20px;} 
   }
   @-webkit-keyframes myship {
     from {left: 480px;} 
     to{left:20px;} 
   }
}

Le navire de l'image ne bouge pas. Toute aide est grandement appréciée.

InformationsquelleAutor George | 2012-05-03
  1. 10

    vous devez déclarer votre image-clé à l'extérieur du sélecteur css, ainsi que d'animer un élément en position absolue.

    http://jsfiddle.net/aNvSf/

    vos modifications de css ressemble à ceci:

    #wrapper{
    position:relative;
    top:50px;
    width:700px;
    height:320px;
    margin:0 auto;
    background:white;
    border-radius:10px;
}
#sea{
    position:relative;
    background:#2875DE;
    width:700px;
    height:170px;
    border-radius:10px;
    top:190px;
}
#sea img{
    position:absolute;
    left:480px;
    top:-20px;
    animation:myship 10s;
    -moz-animation:myship 10s; /* Firefox */
    -webkit-animation:myship 10s; /* Safari and Chrome */               
}

@keyframes myship{
    from {left: 480px;} 
    to{left:20px;} 
}
@-moz-keyframes myship{
    from {left: 480px;} 
    to{left:20px;} 
}
@-webkit-keyframes myship{
    from {left: 480px;} 
    to{left:20px;} 
}​
    InformationsquelleAutor Thomas Jones
  2. 2

    Pour animer avec left, top, bottom ou right, vous devez avoir une position absolue ou flottaient élément. DONC, Changer la position de absolute.

    Aussi, il n'y a unclosed accolades } avant de vous commencé à déclarer les images clés.

    #sea img { 
    position:absolute;
    /* ... */
}

    Accolades Erreur:

        #sea img{
         position:absolute; /* absolute */
         left:480px;top:-20px;
         animation:myship 10s;
        -moz-animation:myship 10s; /* Firefox */
        -webkit-animation:myship 10s; /* Safari and Chrome */
    } 
 /* ^ You have to close the braces here, before declaring the keyframes.

    Ici est un travail démo

    • Avez-vous été à essayer d'animer le récipient ou l'img à l'intérieur?
    • J'ai mis à jour avec le travail de démonstration de trop.
    InformationsquelleAutor Starx