Question

我很漫不经心地开始使用this笔，最终使用css transform属性制作了一种动画：

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抱歉，这真是一团糟-不确定我要做什么。

如何在重复播放时使用CSS转换属性制作动画

0 个答案: