web-dev-qa-db-fra.com

Comment déplacer une div de haut en bas à l'infini en CSS3?

Bonjour, j'essaie de déplacer un div de haut en bas pour créer un effet de flottement/survol en utilisant bottom au lieu de top. Donc, de bottom: 63px à bottom: 400px.

Je suis nouveau dans CSS et les images clés! Comme vous pouvez probablement le dire, voici ce que j’ai essayé et cela n’a apparemment rien fait: 

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    position: absolute;
    display: block;
    width: 244px;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
}

@-webkit-keyframes MoveUpDown {
    from {
        bottom: 63px;
    }
    to { 
        bottom: 400px;
    }
}

Mettre à jour

Le problème, c’est qu’il ne bouclera pas avec l’objectif que je cherche, il passe à 400px, puis revient instantanément à 63px. Comment le ferais-je jusqu’à 400px et que je redescendrais ensuite à 63px? "planant/flottant".

htmlcsscss3css-animations
9
user3112634

Vous pouvez régler le minutage des images clés comme suit:

.object {
  animation: MoveUpDown 1s linear infinite;
  position: absolute;
  left: 0;
  bottom: 0;
}

@keyframes MoveUpDown {
  0%, 100% {
    bottom: 0;
  }
  50% {
    bottom: 100px;
  }
}
<div class="object">
  hello world!
</div>

40
Stickers

div {
        -webkit-animation: action 1s infinite  alternate;
        animation: action 1s infinite  alternate;
    }
    @-webkit-keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
    @keyframes action {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
<div>&#8595;</div>

7
srijishks

Vous voudrez probablement ajouter animation-direction: alternate; (ou -webkit-animation-direction: alternate) à vos règles de style sur .piece-open-space #emma. 

Cela devrait vous donner cet effet flottant.

C'est à dire. votre css devrait ressembler à:

.piece-open-space #emma {
    background-image: url('images/perso/Emma.png?1418918581');
    width: 244px;
    height: 299px;
    display: block;
    background-image: none;
    position: absolute;
    left: 2149px;
    bottom: 63px;
    -webkit-animation: MoveUpDown 50s linear infinite;
    -webkit-animation-direction: alternate;
}
0
burnedikt