Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Updating animation-delay with JS has no effect at all #43080

@yezhizhen

Description

@yezhizhen

Describe the bug:
This blocks adding elegant tests to #43061 (comment)

Compare below with Firefox/Chromium.

To Reproduce:

<!DOCTYPE html>
<html>
<head>
<style>
    #ball {
        width: 50px;
        height: 50px;
        background: blue;
        border-radius: 50%;
        position: relative;
        animation: travel 10s linear infinite;
        animation-delay: 10s;
        animation-play-state: paused; /* It is not because of this line. */
    }

    @keyframes travel {
        from { left: 0%; }
        to   { left: 100%; }
    }
</style>
</head>
<body>

    <h3>Test: Live Update <code>animation-delay</code></h3>
    <div style="border: 1px solid black; width: 400px; padding: 10px;">
        <div id="ball"></div>
    </div>

    <button onclick="setDelay('-5s')">Jump to Middle (-5s)</button>
    <button onclick="setDelay('-9s')">Jump to End (-9s)</button>
    <button onclick="setDelay('0s')">Reset (0s)</button>
    <button onclick="setDelay('10s')">Reset (10s)</button>

    <p>Current Delay: <b id="status">0s</b></p>

    <script>
        function setDelay(val) {
            const ball = document.getElementById('ball');
            ball.style.animationDelay = val;
            document.getElementById('status').innerText = val;
        }
    </script>

</body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions