CSS animation trouble

Hey guys, I hope you’re keeping safe.

Can anyone please enlighten me about what I’m doing wrong in the following CSS & HTML files to not make the animation works? (I’m going through the 300 hours course so I’m at very basic level :slight_smile: )

CSS file:

.airplane {

    position: absolute;

    background: rgba(0, 0, 247, 0.938);

margin-top: 100px;

margin-left: 100px;

width: 160px;

height: 60px;

border-radius: 35%;

}

}

#anim {

    animation-name: anim;

    animation-duration: 5s;

}

@keyframes anim {

    0% {

        background-color: red, white, green;

        left: 100px;

        top: 100px;

    }

    50% {

    background-color : red,white,green, blue;

        left: 200px;

        top: 100px;

    }

    100% {

    background-color : white,blue,red;

        left: 300px;

        top: 100px;

    }

}

HTML file:

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="C:\Users\Daniele\Desktop\NEW ME\CODING\FIRST PROJECT\BLOG PERSONALE\airplane.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div class="wing3"></div>

    <div class="wing4"></div>

    <div class="wing2"></div>

    <div class="wing1"></div>

    <div id="anim" class="airplane"></div>

</body>

</html>

P.S. Ignore the other classes in the HTML file as they are just other part or the image I would like to create.

Thanks.

Hey @Daniele.90,

Hi! My name’s Lewis! I think what the problem is is that your code has almost four different colors on one property tag. I’ve never seen that before but if it works, then sorry, i’m wrong but my advice is: Why not try use one background-color at a time or if you still want all those colors in, just add more time stuff (sorry I forgot what they’re called) for example, add a 0%, 20%, 40%, 60%, 80%, and 100% (or even more!).:slightly_smiling_face:

Thanks @Catalactics, learnt a new thing apparently! I’ll do it next time.

cheers.

Hey Lewis, thanks for your tip.

I’ve tried but nothing changed. I’m not sure but maybe there’s something wrong on the “animation-name” section. I hope someone will sort this out!

cheers.

1 Like

Hope so too, and soon also!
Welcome! :+1:

  • Is this a challenge? If so, can you link the challenge here. Next time if you need a help from a challenge, you can use the Get Help button on the sidebar.
  • The problem in your code is that you CANNOT have multiple color in one line like this:

You can only apply 1 Color, or use rgb(0, 0, 0) or hex #FFFF.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

thanks, I tried again and worked.

cheers.