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

Kleine Animation

@

@Alphavirus

Mitglied
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 erklären, warum.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
margin: 0px;
}
.container {
width: 100%;
height: 800px;
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
}

.div1 {
width: 100px;
height : 100px;
background-color: cornflowerblue;
position: absolute;
animation: right-bottom 1s;
animation-fill-mode: forwards;
}

.div2 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: right-top 1s;
animation-fill-mode: forwards;
}

.div3 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: left-top 1s;
animation-fill-mode: forwards;
}

.div4 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: left-bottom 1s;
animation-fill-mode: forwards;
}

@keyframes right-top{
from {
right: 50%;
top: 50%;
}
to {
right: 0;
top: 0%;
}
}

@keyframes right-bottom {
from {
right: 50%;
bottom: 50%;
}
to {
right: 0%;
bottom: 0%;
}
}

@keyframes left-top {
from {
top: 50%;
left: 50%;
}
to {
top: 0%;
left: 0%;
}
}

@keyframes left-bottom {
from {
left: 50%;
bottom: 50%;
}
to {
left: 0%;
bottom:0%;
}
}
</style>
</head>
<body><div class="container">
<div class="div1">dies hier entfernen</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
 
Danke erstmal
Da scheint es zu gehen.
Bei Chrome gehts nicht bei Brave auch nicht. Als einziger ging Firefox.
Chrome und Brave zeigen immer nur die Hälfte der Animation an.
Weiß jemand woran das liegt?
 
Ich habe das getestet und, wenn ich das fragliche div auskommentiere, beobachte ich genau was Du, @Alphavirus, beschreibst: Der erste Teil des Weges wird verschluckt.
Für mich ist das eine harte Nuss. Wenn ich die Dauer der Animation auf 10s setze, funktioniert es einwandfrei. Das führte mich zu der Vermutung, dass es irgend wie mit dem Laden der Seite zusammen hängt. Ich habe versucht, die Animation sowohl beim load-Event als auch beim DOMContentLoaded zu starten aber beides ohne Erfolg. Nur eine Verzögerung von 1s für das Starten der Animation führte zum Ziel. Ist aber unbefriedigend.
Hier meine Versuche:
Code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
            margin: 0px;
        }

        .container {
            width: 100%;
            height: 800px;
            /* display: flex;
            justify-content: center;
            align-items: center; */
            background-color: grey;
            position: relative;
        }

        /* .container div {
            animation-play-state: paused;
        }

        .container.ani-active div {
            animation-play-state: running;
        } */

        /* Verzögerung führt zum Ziel: */
        .container div {
            animation-delay: 1000ms;
        }

        /* .div1 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            animation: right-bottom 1s;
            animation-fill-mode: forwards;
        } */

        .div2 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            right: 50%;
            top: 50%;
            animation: right-top 1s;
            animation-fill-mode: forwards;
        }

        .div3 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            top: 50%;
            left: 50%;
            animation: left-top 1s;
            animation-fill-mode: forwards;
            top: 50%;
            left: 50%;
        }

        .div4 {
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
            position: absolute;
            left: 50%;
            bottom: 50%;
            animation: left-bottom 1s;
            animation-fill-mode: forwards;
        }

        @keyframes right-top {
            from {
                right: 50%;
                top: 50%;
            }

            to {
                right: 0;
                top: 0%;
            }
        }

        /* @keyframes right-bottom {
            from {
                right: 50%;
                bottom: 50%;
            }

            to {
                right: 0%;
                bottom: 0%;
            }
        } */

        @keyframes left-top {
            from {
                top: 50%;
                left: 50%;
            }

            to {
                top: 0%;
                left: 0%;
            }
        }

        @keyframes left-bottom {
            from {
                left: 50%;
                bottom: 50%;
            }

            to {
                left: 0%;
                bottom: 0%;
            }
        }
    </style>
    <script>
        // Führt nicht zum Ziel:
        // document.addEventListener('DOMContentLoaded', event => {
        //     document.querySelector('.container').classList.add('ani-active');
        // });

        // Führt nicht zum Ziel:
        // window.addEventListener('load', event => {
        //     document.querySelector('.container').classList.add('ani-active');
        // });

        // Führt zum Ziel, aber ärgerliche Verzögerung:
        // setTimeout(() => {
        //     document.querySelector('.container').classList.add('ani-active');
        // }, 1000);
    </script>
</head>

<body>
    <div class="container">
        <!-- <div class="div1">dies hier entfernen</div> -->
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
</body>

</html>
 
Hmm hab's auch mal lokal getestet.
CSS: 
.container > div {
animation-delay: 0.5s 
}

So funktioniet es im Chrome, allerdings ohne Verzögerung!
Im Firefox ist die Verzögerung da!
Echt verhext!
 
Eine Notlösung:
Javascript: 
 if (navigator.userAgent.indexOf("Chrome") !=  -1) {
for (let el of document.querySelectorAll(".container > div")) {
   el.style.animationDelay = "0.5s";
  }
}

Wie schauts denn im Safari aus?
 
Weil ich den Dingen gern auf den Grund gehe habe ich das Problem mal auf Stackoverflow zur Diskussion gestellt:
stackoverflow.com

Issue with animation, skips half of it's way

I'm having a weird issue with a simple animation: Four/three elements should move from the center to the corners of a container: <!DOCTYPE html> <html lang="en"> <head>...
stackoverflow.com stackoverflow.com
Die Antwort von Yash Raj Bharti liefert zwar auch keine Erklärung aber einen interessanten Hinweis zur Lösung: Fügt man irgend wo Text ein, funktioniert die Animation wie gewünscht:
Code: 
    <div class="container">
        <!-- <div class="div1">dies hier entfernen</div> -->
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
    </div>
Auch wenn ich den Text im Container einfüge:
Code: 
    <div class="container">
        Some text
        <!-- <div class="div1">dies hier entfernen</div> -->
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
 
Ja tatsächlich!! Es funktioniert! Ein Wunder!
Dankeschön.
Nach dem einfügen vor dem Body Tag ging es.
Falls noch jemand eine andere Lösung hat, bitte posten. Einfach nur aus Interesse.
 
Hmm habe das noch mal getestet mit Text.
HTML: 
<div class="div1"><span>Text</span></div>
CSS: 
.div1 span {
visibility: hidden; /* geht nicht */
display: none; /* geht nicht */
opacity:0; /* geht nicht */
color:transparent; /* geht als einziges */
}
Ich weiß ja nicht, was du noch vorhast, aber wenn du Text einfügen wirst, (egal wo) geht es ja!
CSS: 
.div1 span {
user-select: none; 
color:transparent;
}
Wäre ein Fix!
 
Zuletzt bearbeitet:
Ich hab den Code noch mal überarbeitet.
Jetzt funktioniert es. Es lag an der Dauer der Animation. Die war zu kurz.
Übrigens hab ich bei den keyframes das from bzw: 0% weggelassen.
Kann man das ruhig machen oder hat das irgendwelche Nachteile?
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quadrat Animation</title>
    <style>
        body {
            margin: 0;
        }

        #div1 {
            position: absolute;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: quadrat1 2s;
            animation-fill-mode: forwards;
            transform: translate(calc(50vw - 50%), calc(50vh -  50%));
        }
        #div2 {
            position: absolute;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: quadrat2 2s;
            animation-fill-mode: forwards;
            transform: translate(calc(50vw - 50%), calc(50vh -  50%));
        }

        #div3 {
            position: absolute;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: quadrat3 2s;
            animation-fill-mode: forwards;
            transform: translate(calc(50vw - 50%), calc(50vh -  50%));
        }

        #div4 {
            position: absolute;
            background-color: lightblue;
            height: 100px;
            width: 100px;
            animation: quadrat4 2s;
            animation-fill-mode: forwards;
            transform: translate(calc(50vw - 50%), calc(50vh -  50%));
        }

        @keyframes quadrat1 {
            to {
                transform: translate(0vw, 0vh);
            }
        }

        @keyframes quadrat2 {
            to {
                transform: translate(calc(100vw - 100%), 0vh);
            }
        }

        @keyframes quadrat3 {
            to {
                transform: translate(calc(100vw - 100%), calc(100vh - 100%));
            }
        }

        @keyframes quadrat4 {
            to {
                transform: translate(0vw, calc(100vh - 100%));
            }
        }
    </style>
</head>
<body>
    <main>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </main>
</body>
</html>
 
Habe es mal getestet, ich sehe keinen Unterschied mehr zwischen Firefox und Chrome. Das ist sehr seltsam...
Ob man das "from" weglassen kann, weiß ich nicht, anscheinend funktioniert es.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben