Question 237647 in Html Question posted in
Some basic documentation can be found here.

Html – Div disappearing during CSS animation

I made a simple animation (3 all together) but the second time it plays the div just outright disappears and then comes back after a few seconds.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div>
        <p>Animation</p>
    </div>
</body>
</html>


div {
    
    width: 100px;
    height: 100px;
    padding: 5px;
    animation-duration: 10s, 5s, 7s;
    animation-direction: alternate-reverse, alternate, alternate;
    
    animation-delay: 3s, 0s, 3s;
    animation-iteration-count: 7, 6, 6 ;
    animation-name: move-away, color-change, big-to-small;
}

p {
    color: white;
    text-align: center;
    user-select: none;
}

@keyframes move-away {
    from {
        margin-left: 100%;
    }

    

    to {
        margin-right: 20px;
    }
}

@keyframes color-change {
    from {
        background-color: #DCAB6B;
    }

    25% {
        background-color: #7d4f50;
    }

    50% {
        background-color: #8f250c;
    }

    75% {
        background-color: #583101;
    }

    to {
        background-color: #000000;
    }
}

@keyframes big-to-small {
    from {
        padding: 5px;
    }

    50% {
        padding: 20px;
    }

    to {
        padding: 5px;
    }
}
Tags:

2

Answers


  1. 0

    Inspected the thing and it’s just that the <div> has transparent background. This happened because the color-change animation has ended much sooner than the other ones and the <div> itself has no background color.

    Increase one from following values make the <div> stay colored longer:

    • animation-duration
    • animation-delay
    • animation-iteration-count

    As bonus, you can set the animation-iteration-count of that animation to Infinite to make it loop forever.

    Login or Signup to reply.
  2. 0

    If you want your animations to run indefinately, consider using animation-iteration-count with the keyword infinite as the value. you can view the docs for it here: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

    Note you can also give multiple values if you want each animation to iterate a different number of times.

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

Back To Top
Search