如何创建一个旋转动画，在每个周期中连续切换方向？

Question

我有以下六边形的 svg 和旋转动画，目前仅向 1 个方向移动。我如何调整它，以便它在每个动画周期后旋转另一个方向？

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

svg {
  animation: rotation 5s linear infinite;
}

<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 184.751 184.751" xml:space="preserve">
    <path d="M0,92.375l46.188-80h92.378l46.185,80l-46.185,80H46.188L0,92.375z"/>
</svg>

Answer 1

你是这个意思吗？使用

animation-direction: alternate;

将在一个周期后翻转动画方向。

:root{
  --wh:250px;
  --colour:black;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

svg {
  width:var(--wh);
  height:var(--wh);
  animation: rotation 5s linear infinite;
  animation-direction: alternate;
}

<svg fill="var(--colour)" viewBox="0 0 184.751 184.751" xml:space="preserve">
    <path d="M0,92.375l46.188-80h92.378l46.185,80l-46.185,80H46.188L0,92.375z"/>
</svg>