0

How do I get all these svg fans to move? https://jsfiddle.net/xvpn653t/ How do I get each of them to spin? I am only able to get one fan to move.

.fan.fan2.fan3.fan4.fan5.fan6 svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}

.fan.fan2.fan3.fan4.fan5.fan6 svg {
  animation-iteration-count: 4;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="fan fan2 fan3 fan4 fan5 fan6">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <g id="fan">
      <path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
    </g>
  </svg>
</div>
<div class="fan fan2">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

<div class="fan fan3">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

<div class="fan fan4 ">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

<div class="fan fan5">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>
<div class="fan fan6">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

1 Answer 1

1

Since each container has .fan class name, all you need is apply the animation to SVG whose container contains that class:

.fan.fan1 svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: auto;
/* don't need this
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}
.fan.fan2.fan3.fan4.fan5.fan6 svg {
 
animation-iteration-count: 4;
*/
}

/* added */
.fan svg
{
  animation: fan-spin 4s linear;
  animation-iteration-count: 4;
}


@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
<div class="fan fan1">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <g id="fan">
      <path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
    </g>
  </svg>
</div>


<div class="fan fan2">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

<div class="fan fan3">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

<div class="fan fan4 ">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

<div class="fan fan5">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>


<div class="fan fan6">
  <svg width="50px" height="50px" viewBox="76 130 381 381">
    <use href="#fan" />
  </svg></div>

2
  • I am not able to get all the fans to move. jsfiddle.net/yutenpjx Nov 8, 2022 at 1:32
  • They do spin fine, but they are shown outside of .ratio-keeper container with overflow: hidden; property, hens they are not visible. Also, by the time curtain slides, they might complete their 4 spins.
    – vanowm
    Nov 8, 2022 at 1:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.