Animation delay trouble

Question

I'm making a loading screen for my website and i want to make a line that goes from 0-100% in few sec. I have made it successfully, but when I try adding animation-delay nothing happens. I want the animation to start 2 sec after the website loads. Anyone can help?

Here is the code:

.loading
{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 10px;
    display: flex;
    transform: translate(-70px);
    animation-delay: 2s;
}
.obj
{
    width: 0px;
    height: 8px;
    background: black;
    border-radius: 15px;
    z-index: 1; position:relative;
    animation:loading 2s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

@keyframes loading{
    0% {
        width: 0px;
    }
    100% {
        width: 150px;
    }
}

<head>
    <link rel="stylesheet" type="text/css" href="loadingstyles.css">
</head>

<body>
    <div class="loading">
        <div class="obj"></div>
    </div>
</body>

I tired to add it in .obj but also .loading, non of them worked. — Dawid Motylski, Mar 20 '19 at 00:02
add with:0 to the element then add `forwards` to the animation — Temani Afif, Mar 20 '19 at 00:10
I have added forwards to the animation but with:0? You want me to change width to 0 in .obj? — Dawid Motylski, Mar 20 '19 at 00:30
yes, before the animation the width need to be 0 ..and forwards will make it 150px at the end of the animation — Temani Afif, Mar 20 '19 at 00:48
I asked because it was first thing I did before asking here but as you can see it makes the .obj disappear. — Dawid Motylski, Mar 20 '19 at 01:11
there is no `,` before forwards and you have a missing `}` in the keyframe — Temani Afif, Mar 20 '19 at 01:14

score -1 · Answer 1 · answered Mar 19 '19 at 23:58

-1

I think you're looking for transition-delay. You can add this right into your css. https://www.w3schools.com/cssref/css3_pr_transition-delay.asp

answered Mar 19 '19 at 23:58

Stephen Burke

389
2
13

I tired transition-delay, doesn't work either. :/ – Dawid Motylski Mar 20 '19 at 00:00

Animation delay trouble

1 Answers1