Html - How would I create a rotation animation that switches direction continuously as it goes through each cycle?

Jameson
November 15, 2024
178 views
0 votes
2 Answers

I have the following svg of a hexagon and a rotation animation in for it that only goes 1 direction at the moment. How would I adjust this so it rotates the other direction after each animation cycle?

@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>

Answers

Is this what you mean? Using animation-direction: alternate; will flip the aninmation direction after the one cycle.

:root{
  --wh:125px;
  --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>

- anonymous_user
- November 15, 2024 at 5:31 pm
- 0 votes
0
it’s easy :
```
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

svg {
  animation: rotation 10s linear infinite;
}
```
Login or Signup to reply.