Как сделать анимацию, используя CSS Transform свойство повтора - PullRequest
Новая
       13

Как сделать анимацию, используя CSS Transform свойство повтора

0 голосов
/ 11 сентября 2018

Я запустил эту ручку совершенно бездумно, и закончил тем, что сделал вид анимации, используя свойство преобразования css:

HTML 

<div class="logo-block">
  <div class="logo-block-yellow"></div>
  <div class="logo-block-magenta"></div>
  <div class="logo-block-cyan"></div>
  <div class="logo-block-black"></div>
</div>

CSS (SCSS)

.logo-block {
  height: 332px;
  width: 332px;
  position: absolute;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
  .logo-block-yellow {
    box-sizing: inherit;
    background-color: yellow;
    height: 150px;
    width: 150px;
    margin: 8px;
  }
  .logo-block-magenta {
    box-sizing: inherit;
    background-color: magenta;
    height: 150px;
    width: 150px;
    margin: 8px;
  }
  .logo-block-cyan {
    box-sizing: inherit;
    background-color: cyan;
    height: 150px;
    width: 150px;
    margin: 8px;
  }
  .logo-block-black {
    box-sizing: inherit;
    background-color: black;
    height: 150px;
    width: 150px;
    margin: 8px;
  }
  &:hover {
    .logo-block-yellow {
      transform: rotate(90deg);
      transform-origin: 105% 105%;
      transition: transform 1s;
    }
    .logo-block-magenta {
      transform: rotate(90deg);
      transform-origin: -5% 105%;
      transition: transform 1s;
    }
    .logo-block-cyan {
      transform: rotate(-90deg);
      transform-origin: -5% -5%;
      transition: transform 1s;
    }
    .logo-block-black {
      transform: rotate(90deg);
      transform-origin: -5% -5%;
      transition: transform 1s;
    }
  }
}

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

У меня нет опыта использования CSS-анимации, и я использую JavaScript довольно просто (я начал изучать совсем недавно).

Я видел свойство animate-iteration, которое работает для анимации, но так как это не анимация, я думаю, что не могу ее использовать?Стоит ли пытаться преобразовать мои свойства преобразования в эквивалентные свойства анимации?

Любые предложения приветствуются, вне зависимости от моего уровня понимания или нет!

Спасибо

Джейми

PS Извините, это довольно беспорядок - не совсем уверен, что я здесь делаю.

...