2

I'm making a website to tell you the weather as a personal project to understand jquery and working with APIs. I'm trying to map the speed of the clouds moving along the screen to the wind speed. the problem is i can't get the clouds animation to work.

#clouds{
    background-size: 300px 217px;
    height:300px;
    width:300px;
    margin: auto;
    background-repeat: repeat-x;
    animation:mymove infinite 10s;  
}

@keyframes mymove {
    from {
            background-position: left bottom;
    }
    to {
        background-position: right bottom;
    }
}

I expect the clouds to be moving from left to right but they're stationary

the html just in case

 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Weather</title>
        <link rel="stylesheet" href="../static/css/style.css">
        <script src="../app/jquery-3.3.1.min.js"></script>
        <script src="../static/js/getWeather.js"></script>
        <script src="../static/js/pageChange.js"></script>
</head>
<body>
    <div id="sun">
        <div id="clouds">

        </div>
    </div>
</body>

Matt-the-Marxist
  • 164
  • 1
  • 1
  • 12
  • right and left will behave the same as the width is equal to background-size .. `300px` (https://stackoverflow.com/a/51734530/8620333) – Temani Afif Feb 14 '19 at 22:15
  • i want them to move from left to right @TemaniAfif – Matt-the-Marxist Feb 14 '19 at 22:19
  • see the link I shared to first understand why it's not working like intended then you will also find how to make it working. by the way in your case you can simply do `-300px 100%` --> `0 100%` – Temani Afif Feb 14 '19 at 22:20

0 Answers0