Как анимировать мои облака, идущие в разных направлениях в CSS?

#css #css-animations

#css #css-анимация

Вопрос:

Эй, ребята, я пытаюсь анимировать два моих облака, движущиеся в разных направлениях друг от друга с разной скоростью, от выключения экрана до повторного включения экрана. У меня вроде как анимация выполняется с одним облаком, но по какой-то причине она не будет работать с другим облаком, или я должен сказать, как я не хочу, чтобы это работало. Есть ли кто-нибудь, кто может мне помочь?

Вот мой CSS

 /*My clouds positions*/
 img.cloud1 {
 float:  right;
 animation: pulse 3s ease infinite alternate, 
 nudge 10s linear infinite alternate;

  }

 @keyframes nudge {
 0%, 100% {
 transform: translate(0, 0);
 }

 50% {
 transform: translate(1100px, 0);
 }

 80% {
 transform: translate(-150px, 0);
 }
 }


 img.cloud2 {
 float:  left;


  }

1. Пожалуйста, сделайте свой код рабочим фрагментом. На данный момент мы не знаем, что делает pulse, если он устанавливает преобразование, у вас могут возникнуть проблемы с nudge, а ко второму облаку не прикреплена анимация.

Ответ №1:

Вы можете создать анимацию «путь» внутри ключевых кадров. Затем вы присваиваете ему свойство animation, в котором вы можете создавать множество вариантов, таких как: длительность, итерация, задержка, направление (вы можете изменить его) и, вероятно, наиболее интересным для ваших облаков является animation-timing-function, где вы можете создавать пользовательские «bezier», которые в основном являются свойствомгде вы можете определить скорость более подробно.

Я предлагаю вам взглянуть сюда, чтобы узнать больше: https://css-tricks.com/snippets/css/keyframe-animation-syntax /

Или будьте немного конкретнее с вашим вопросом о том, как это должно работать, и добавьте «рабочий» пример