Problem - CSS Animation

Question

Hello, everyone. I’m a beginner in web development and wanted to solve a problem that might even be basic for some of you. In short, I can’t get VS code to compile this part of css code, more precisely the "Animate" part, where clearly when played in Vscode there is no compilation.

box-area li{
    position: absolute;
    display: block;
    list-style: none;
    width: 25px;
    height: 25px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 20s linear infinite;

In the video-course I was watching the instructor used exactly these parameters. Would anyone have any hint as to why in Animation the "Animate" is not identified by the compiler?

Answer 1

As stated in the above comment, maybe you forgot two details:

1. Add the correct reference on CSS, if 'box-area' is a class you should put a point before indicating '.box-area' if a id a game-old/hashtag '#box-area' of the target element;

2. Add @keyframes to your <style>.

links to studies:

mdn w3schools

@keyframes animate0 {
  from {background-color: red;}
  to {background-color: yellow;}
}
.box-area-0 {
        position: absolute;
        display: block;
        list-style: none;
        width: 25px;
        height: 25px;
        animation: animate0 2s linear infinite;
}

@keyframes animate1 {
  from {background-color: rgba(0, 0, 0, 0.1);}
  to {background-color: rgba(255, 255, 255, 0.9);}
}
.box-area-1 {
        position: absolute;
        display: block;
        list-style: none;
        top: 30px;
        width: 25px;
        height: 25px;
        animation: animate1 2s linear infinite;
}

<div class="box-area-0">
</div>

<div class="box-area-1">
</div>