• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box Animation. Seite bleibt leer.

@

@Alphavirus

Mitglied
Moin Leute
Ich hab ein kleines Problemchen.
Der Code soll bewirken, das die aquafarbene Box von oben nach unten in die Mittte slided.
In der Mitte angekommen soll die Box anhalten und die Breite sich verdoppeln.
Der Bildschirm bleibt einfach leer, oder zeigt manchmal auch nur einen kleinen Teil der Animation.
Kann jemand damit was anfangen?

Danke
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Iteration Count</title>
<style>
    body {
        margin: 0;
    }

    #box {
        box-sizing: border-box;
        background-color: aqua;
        width: 100px;
        height: 100px;
        transform: translate(calc(50vw - 50%), -100%);
        animation: slidedown 0.5s;
        animation-fill-mode: forwards;
        border-radius: 40%;
    }

    @keyframes slidedown {
    0% {
        transform: translate(calc(50vw - 50%), -100%);
    }
    50% {
        transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    }   
    75% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
    }
</style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
 
Meine Frage als ich das CSS gesehen habe: Was passiert, wenn man eine Eigenschaft in einem Keyframe weg lässt? Du erwartest anscheinend, dass dann der Zustand aus dem letzten Keyframe beibehalten wird. Erhöhe ich die Zeit auf 20 sec sehe ich, dass die Box zunächst herunter gleitet, und dann wieder noch oben und dort angekommen wird sie breiter. D. h. dort wo man das "translate" in einem Keyframe weg lässt, läuft die Animation wieder zu dem Zustand ohne Animation, Position oben außerhalb. Füge ich das "transform" hinzu, funktioniert es wie gewünscht:
Code: 
        @keyframes slidedown {
            0% {
                transform: translate(calc(50vw - 50%), -100%);
            }

            50% {
                transform: translate(calc(50vw - 50%), calc(50vh - 50%));
            }

            75% {
                transform: translate(calc(50vw - 50%), calc(50vh - 50%));
                width: 100px;
            }

            100% {
                transform: translate(calc(50vw - 50%), calc(50vh - 50%));
                width: 200px;
            }
 
Du hast echt ein Händchen für Probleme :cool: .

Also das sollte sein (Bei 1.5s sieht man nicht viel)
CSS: 
   animation: slidedown 2.5s;

und hab das mal getestet:
CSS: 
 @keyframes slidedown {
            0% {
                transform: translate(calc(50vw - 50%),-100vh);
               width: 100px;
            }

            50% {
                transform: translate(calc(50vw - 50%),calc(50vh - 50%));
                   width: 100px;
            }

            75% {
                transform: translate(calc(50vw - 50%),calc(50vh - 50%));
                width: 100px;
            }

            100% {
                 transform: translate(calc(50vw - 50%),calc(50vh - 50%));
                width: 200px;
            }
    }
Scheint zu funktionieren!
 
Aha
Es lag an der animation-duration. Wenn das zu wenig eingestellt ist, funzt das ganze nicht. Bei 3s zum Beispiel - ohne Probleme.
Danke an alle.
 
Es lag an der animation-duration. Wenn das zu wenig eingestellt ist, funzt das ganze nicht.
Zum Vergrößern anklicken....
Möglicher Weise das selbe Problem wie hier:

Kleine Animation

Moin Leute Ich hab eine kleine Animation erstellt und hab eine Frage dazu. der Code bewirkt, dass sich 4 Quadrate von der Mitte der Seite in jeweils eine Ecke bewegen. Wenn man jetzt unten den Text "dies hier entfernen" entfernt, funktioniert die Animation nicht mehr richtig. ich kann mir nicht...
www.html.de
Versuche die Lösung, die dort beschrieben wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben