我有以下六边形的 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>
你是这个意思吗?使用
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>