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

问题描述 投票:0回答:1

我有以下六边形的 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>

html animation svg css-animations
1个回答
0
投票

你是这个意思吗?使用

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>

© www.soinside.com 2019 - 2024. All rights reserved.