Добавление бесконечного перевода и поворота (с разными скоростями) анимации к одному элементу - PullRequest
Новая
       17

Добавление бесконечного перевода и поворота (с разными скоростями) анимации к одному элементу

1 голос
/ 18 июня 2019

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

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

анимация: вращение @r (3 с, 10 с) бесконечно, поток @r (20 с, 40 с) бесконечно линейно; 

@keyframes flow {
  0%, 100%{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)   
  }
  50% {
    -webkit-transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);  
    transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);       
  }
}

@keyframes spin {
  from  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }   
}

Я надеюсь, что есть возможность применить их оба одновременно, даже если это не чистый CSS.

1 Ответ

1 голос
/ 18 июня 2019

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

...