Question 415199 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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.
Please signup or login to give your own answer.

Back To Top
Search