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".
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>
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>↓</div>
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;
}