Box Animation. Seite bleibt leer.

@Alphavirus · Heute um 15:09

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>

Sempervivum · Heute um 16:21

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

@Alphavirus · Heute um 16:37

Hab den Code getestet, bei mir erscheint einfach nur die Box in der Mitte der Seite. Ohne Animation.
Ich versteh nicht, wo der/die Fehler sind.

Oliver77 · Heute um 18:02

Du hast echt ein Händchen für Probleme

.

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!

Box Animation. Seite bleibt leer.

@Alphavirus

Neues Mitglied

Sempervivum

Senior HTML'ler

@Alphavirus

Neues Mitglied

Oliver77

Aktives Mitglied

Neueste Beiträge