Веб-сайт, показывающий CSS-анимацию в зависимости от текущей погоды с использованием Yahoo API ⇐ CSS

[Гость]

Я хочу, чтобы на моем веб-сайте отображалась CSS-анимация в зависимости от данных о погоде, которые он получает от API погоды Yahoo. Пока что, чтобы проверить это, я создал анимацию облаков, плывущих по экрану, но хочу, чтобы они показывались только тогда, когда облачно. У меня есть кусок JS, который, как мне кажется, должен работать, но я не уверен, как реализовать анимацию на его основе.

Я думаю, что моя текущая облачная анимация должна иметь формат body.cloudy, body.mostly-cloudy, body.partly-cloudy{}, но я не знаю, как это сделать.

Ниже приведен мой код. Я удалил часть HTML (функции навигации и т. д.), чтобы сократить код этого вопроса.

Мой HTML:

JS

$.YQL = функция(запрос, обратный вызов) { var encodedQuery = encodeURIComponent(query.toLowerCase()), URL = 'http://query.yahooapis.com/v1/public/yql?q=' + encodedQuery + '&format=json&callback=?'; $.getJSON(url, обратный вызов); }; $.YQL("выберите * из RSS, где url='http://weather.yahooapis.com/forecastrs ... tion(data){ вар ш = data.query.results.item; вар класс = w.condition.text; var encodedclass = class.replace(/\s+/g, '-').toLowerCase(); $('body').addClass(закодированный класс); }); CSS
тело{ переполнение: скрыто; цвет фона: синий; } .облако { ширина: 512 пикселей; высота: 512 пикселей; позиция: абсолютная; } .cloud01 { верх: 10 пикселей; z-индекс: 1; фон: URL (файл://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 без повтора; анимация: дрифт 35с линейный бесконечный; } .cloud02 { верх: 10 пикселей; z-индекс: 1; фон: URL (файл://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 без повтора; анимация: дрифт02 35 с, линейная бесконечность; } .cloud03 { верх: 10 пикселей; z-индекс: 1; фон: URL (файл://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 без повтора; анимация: дрифт02 55 с, линейная бесконечность; } .cloud04 { верх: 10 пикселей; z-индекс: 1; фон: URL (файл://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds04.png) 0 0 без повтора; анимация: дрифт 45с линейный бесконечный; } .cloud05 { верх: 10 пикселей; z-индекс: 1; фон: URL (файл://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds03.png) 0 0 без повтора; анимация: дрифт 30с, линейная бесконечность; } .cloud06 { верх: 10 пикселей; z-индекс: 1; фон: URL (файл://C:/Users/Sara/Documents/ExploreCanterbury/img/clouds02.png) 0 0 без повтора; анимация: дрифт02 25 с, линейная бесконечность; } @keyframes смещается { из {transform: Translate(-150px,-550px);} в {transform: Translate(350px, 550px);} } @keyframesdrift02 { из {transform: Translate(350px,-550px);} в {transform: Translate(1050px, 550px);} } body.cloudy, body.partly-cloudy, body.mostly-cloudy { }