it-swarm.com.de

Wie bewege ich ein Div unendlich in CSS3 auf und ab?

Hallo, ich versuche die einfache Aufgabe, ein div nach oben und unten zu verschieben, um einen Floating/Hover-Effekt zu erzielen, der Bottom anstelle von Top verwendet. Also von bottom: 63px zu bottom: 400px.

Ich bin neu in CSS und Keyframes! Wie Sie wahrscheinlich sagen können Aber hier ist, was ich versucht habe und es schien nichts zu tun: 

.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;
    }
}

Update

Das Problem ist, dass es keine Schleife mit dem Ziel ist, nach dem ich suche, dass es auf 400px geht. Dann geht es sofort wieder auf 63px zurück. Wie würde ich es auf 400px bringen und dann wieder auf 63px heruntergehen? "schweben/schweben".

9
user3112634

Sie können das Timing der Keyframes wie folgt anpassen:

.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

Sie möchten wahrscheinlich animation-direction: alternate; (oder -webkit-animation-direction: alternate) zu Ihren Stilregeln in .piece-open-space #emma hinzufügen. 

Das sollte Ihnen den schwebenden Auf- und Abwärtseffekt geben.

Das heißt Ihre CSS sollte folgendermaßen aussehen:

.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