Why won't the animation start?

Y

Yana2020-10-18 18:34:38

css

Yana, 2020-10-18 18:34:38

The animation does not start, it seems that everything was written correctly (
Google did not find anything on this topic, I work in ATOM there, too, nothing starts through the preview (

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="loading">
            
        </div>
    </div>
</body>
</html>

body {
    margin: 0;
    padding: 0;
    -webkit-animation: pulse infinite 5s;
}
.container {
    width: 50%;
    background: #fff;
    margin: 280px auto;
    position: relative;
    padding: 20px 40px;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
.loading {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 10px;
    background: #f1f1f1;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    overflow: hidden;
}
.loading:after {
    content: '';
    position: absolute;
    left: 0;
    width: 0%;
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    -webkit-animation: load infinite 5s;
}
@keyframes load:
{
    0%
    {
        width: 0%;
        background: #f00;
    }
}
{
    50%
    {
        width: 70%;
        background: #00f;
    }
}
{
    100%
    {
        width: 100%;
        background: #0f0;
    }
}
@keyframes pulse:
{
    0%
    {
        background: #f00;
    }
}
{
    50%
    {
        background: #00f;
    }
}
{
    100%
    {
        background: #0f0;
    }
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

I

Ivan Bogachev, 2020-10-18
@Yana2112

Your keyframes syntax is wrong - colons and extra parentheses. It should be something like this:

@keyframes load {
    0% {
        width: 0%;
        background: #f00;
    }
    50% {
        width: 70%;
        background: #00f;
    }
    100% {
        width: 100%;
        background: #0f0;
    }
}