Как сделать анимацию утро, день, вечер?

Для создания анимации смены времени суток (утро, день, вечер) в веб-приложении с использованием JavaScript можно использовать несколько методов.

1. Использование CSS анимации:
Самый простой способ достичь анимации смены времени суток - это использование CSS анимаций. Для этого вам понадобится создать несколько классов CSS, каждый из которых представляет разные времена суток. Например:

.morning {
  background-color: #ffe49c;
  /* дополнительные стили для утра */
}

.day {
  background-color: #8edaff;
  /* дополнительные стили для дня */
}

.evening {
  background-color: #ffb17d;
  /* дополнительные стили для вечера */
}

/* добавьте любые другие ключевые кадры или анимации */

Затем вы можете использовать JavaScript, чтобы добавить или удалить соответствующие классы CSS в зависимости от текущего времени. Например:

function updateTimeOfDay() {
  var currentTime = new Date().getHours();
  var body = document.querySelector('body');

  if (currentTime >= 6 && currentTime < 12) {
    body.classList.remove('day', 'evening');
    body.classList.add('morning');
  } else if (currentTime >= 12 && currentTime < 18) {
    body.classList.remove('morning', 'evening');
    body.classList.add('day');
  } else {
    body.classList.remove('morning', 'day');
    body.classList.add('evening');
  }
}

// Обновляйте время суток каждые полчаса или по вашему желанию
setInterval(updateTimeOfDay, 1800000);

2. Использование библиотек анимаций:
Еще одним вариантом является использование библиотек анимаций, таких как GSAP (GreenSock Animation Platform) или Anime.js. Эти библиотеки предоставляют более мощные инструменты для создания анимаций и позволяют вам точнее контролировать анимацию смены времени суток.

Например, с использованием GSAP, вы можете создать таймлайн анимацию, которая будет включать различные анимации для каждого времени суток:

var tl = gsap.timeline({ repeat: -1 });

var morningAnimation = gsap.to('.morning-elements', { /* анимации для утра */ });
var dayAnimation = gsap.to('.day-elements', { /* анимации для дня */ });
var eveningAnimation = gsap.to('.evening-elements', { /* анимации для вечера */ });

tl.add(morningAnimation, 'morning')
  .add(dayAnimation, 'day')
  .add(eveningAnimation, 'evening');

// Обновляйте время суток каждые полчаса или по вашему желанию
setInterval(function() {
  tl.paused(!isActiveTimeOfDay());
}, 1800000);

function isActiveTimeOfDay() {
  var currentTime = new Date().getHours();

  if (currentTime >= 6 && currentTime < 12) {
    return tl.time() >= tl.getLabelTime('morning');
  } else if (currentTime >= 12 && currentTime < 18) {
    return tl.time() >= tl.getLabelTime('day');
  } else {
    return tl.time() >= tl.getLabelTime('evening');
  }
}

Оба этих подхода могут быть настроены и дополнены в соответствии с вашими потребностями. Помимо изменения цвета или стилей фона, вы также можете добавить другие анимации или эффекты, чтобы сделать анимацию более динамичной и интересной.