Question 406917 in CSS Question posted in
Some basic documentation can be found here.

Css – 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>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Animation</title>
    <style>
        body {
            margin: 0px;
        }

        .container {
            width: 100%;
            height: 800px;
            background-color: grey;
            position: relative;
        }

        .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">remove this</div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
    </div>
</body>

</html>

When alle child divs are there the animation is working fine. However when I remove div.div1 where the content reads "remove this", the remaining divs are skipping the first part of their way to the corners. I’m helpless and have no clue what’s the reason for this behaviour.

I’m expecting that the animation is working the same way independently of the number of divs. I tried to start the animation on the load event or DOMDocumentReady but no success. When I add a delay the animation is working fine again:

        .container div {
            animation-delay: 1000ms;
        }

however the delay is not welcome. When I increase the duration to, say, 10s, again the animation is working fine. Update: For me the issue occurs on Windows 10, Opera, Chrome, Edge.

Tags:

2

Answers


  1. 0

    I have run your code using an online html editor, and worked well without the div1. You can also use the "display: none;" style for div1.

    Login or Signup to reply.
  2. 0

    Interestingly I was able to replicate the issue on Chrome v128 on Mac Monterey (and it has no issues on Safari)
    Also, in my case having the div’s empty is causing the animation to skip the first half, so here’s my approach that works:

    <!DOCTYPE html>
<html lang="en">

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

        .container {
            width: 100%;
            height: 800px;
            background-color: grey;
            position: relative;
        }

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

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

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

        .div4 {
            width: 100px;
            height: 100px;
            color: cornflowerblue;
            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">Removed</div> -->
        <div class="div2">2</div>
        <div class="div3">3</div>
        <div class="div4">4</div>
    </div>
</body>

</html>

    I will research more to what causes it exactly, but seems no content on page makes some bug occur to the animations (because when I add text anywhere in the document it is again working).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search