@keyframes animation not running

Question

I can't run linear-gradient animation by @keyframes. I think it is due to background-position property in my code that is causing the problem. However, https://webdevtrick.com/css-gradient-background/'>here, background-position property doesn't cause the problem.

I have compared my code to the code at that site to see what essential property is missing in mine. Here is the CSS code:

body {
    margin: 0;
}

.navbar {
    background-image: linear-gradient(125deg, #337909, #082a87);
    height: 10%;
    width: 100%;
    position: absolute;
    -webkit-animation: animebg 5s infinite;
            animation: animebg 5s infinite;
    background-size: auto;
}

header {
    color: aliceblue;
    font-family: cursive; 
    text-align: center; 
}

@-webkit-keyframes animebg {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes animebg {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

HTML code:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='theme.css'>
<style>  
</style>
</head>
<body>
    <header class='navbar'>
        <h1>Welcome!</h1>
    </header>
<!--<button type="button" class="button1">Yes!</button>-->
</body>
</html>

Looks like [`linear-gradient` backgrounds don't respect `background-position`](https://stackoverflow.com/questions/51731106/using-percentage-values-with-background-position-on-a-linear-gradient). — Alexander Nied, Oct 23 '19 at 03:27
@AlexanderNied it doest respect but we simply need to understand how ;) — Temani Afif, Oct 23 '19 at 10:05
@AlexanderNied Thank you for your hint! I accept it as the answer! — user36339, Oct 23 '19 at 16:37

MMDM · Answer 1 · 2019-10-25T08:48:56.657

I think you can't move position with percentage in animation (Use another unit) unless you set background-size to it. Look at the snippet below:

I hope it helps :)

body {
            margin: 0;
        }

        .navbar {
            background-image: linear-gradient(90deg, #337909, #082a87, #337909);
            background-size: auto;
            height: 10%;
            width: 100%;
            position: absolute;
            -webkit-animation: animebg 2.5s linear infinite;
            -moz-animation: animebg 2.5s linear infinite;
            animation: animebg 2.5s linear infinite;
        }

        header {
            color: aliceblue;
            font-family: cursive;
            text-align: center;
        }

        @keyframes animebg {
            0% {
                background-position: 100vw 50%;
            }
            100% {
                background-position: 0 50%;
            }
        }

<header class='navbar'>
  <h1>Welcome!</h1>
</header>

@keyframes animation not running

1 Answers1