Как на css заставить двигаться облака с разных точек?

Question

[Cheizer]

Привет друзья! Решил заняться изучением css анимации, и не пойму оин момент, в примере облаков, https://codepen.io/Cheizer/pen/Wypzrg

Как сделать так что бы 3 рисунка начинали свое движение с разнух точек, 1 например с начала экрана позиция left:0, второй с середины позиция left:50%, и третий с left 80vw например, в css этим управд=лять я так понимаю недостаточно для анимации? Неужели нельзя обойтись одним кейфреймом и рулить стартом только из css свойств элемента?

Фрейм один вот

@keyframes moveleft {
  0% { left: 0;}
  50% {left: calc(100% - 393px);}
  100% {left: 0;}
}

И вот поднял пример, все в куче и двигаются в куче, а прописаны разные позиции у них в css https://codepen.io/Cheizer/pen/Wypzrg

Что же, придеться отдельно кейфрейм для каждого писать?

Comments

[Cheizer]

Ankhena, ок

Answer 1

[Александр Алексеев]

не используйте left right (при таком подходе происходит рефлоу всей страницы на каждый пиксель анимации, при большом количестве элементов все начнет тормозить)
расположите все облака по центру и сместите отдельные с помощью transform: translateX(***px);
и анимируйте тоже transform

Comments

[Cheizer]

я уже отказался от css анимации в принципе, как раз потому что она тормозная :) в пользу js анимации, а точнее animejs.com/documentation

[Александр Алексеев]

это не js анимация))) это управление css транзишнами с помощью js
то же что я и вам написал только плагином

[Cheizer]

shure348, ок, я попробую ваш совет только с помощью JS этой, там понятней как то все управляется :)
Только не понял, там как раз анимируется с помощью translateX, мне transform не нужен, просто движение облаков нужно

[Александр Алексеев]

translateX так то это значение transform

.cloud {
  transform: translateX(100%);
}