animation-iteration-count не работает

101

03 февраля 2022, 17:00

animation-iteration-count: 2, 2, 3;

Не понимаю почему animation-iteration-count работает только для последней анимации?

#box { 
  width: 50px; 
  height: 50px; 
  background-color: red; 
  animation: boxMove 4s 0s linear, boxMove2 2s 4s linear, boxMove3 4s linear 6s forwards; 
  animation-iteration-count: 2, 2, 3; /*Сработает только boxMove3(произойдет 3 итерации), а остальные нет*/ 
} 
 
@keyframes boxMove { 
  from { 
    transform: translate(0px) rotate(0deg); 
        } 
  to { 
    transform: translate(400px) rotate(144deg); 
  } 
} 
 
@keyframes boxMove2 { 
  from { 
    transform: translate(400px) rotate(144deg); 
  } 
  to { 
    transform: translate(400px, 72px) rotate(216deg); 
  } 
} 
 
@keyframes boxMove3 { 
  from { 
    transform: translate(400px, 72px) rotate(216deg); 
  } 
  to { 
    transform: translate(700px, 100px) rotate(360deg); 
  } 
}

<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<body> 
  <div id="box"></div> 
</body> 
</html>

Answer 1

div { 
  margin: 10px 0; 
  padding: 10px; 
  width: 90%; 
  background-color: red; 
  color: white; 
   
} 
 
#ok { 
  background-color: green; 
} 
 
@keyframes blink { 
  0% { 
    opacity: 0; 
  } 
  100% { 
    opacity: 1; 
  } 
} 
 
@keyframes bgchange { 
  from { 
    background: green; 
  } 
  to { 
    background: red; 
  } 
} 
 
@keyframes swing { 
  15% { 
    transform: translateX(5px); 
  } 
  30% { 
    transform: translateX(-5px); 
  } 
  50% { 
    transform: translateX(3px); 
  } 
  65% { 
    transform: translateX(-3px); 
  } 
  80% { 
    transform: translateX(2px); 
  } 
  100% { 
    transform: translateX(0); 
  } 
} 
 
.swing:hover { 
  animation-name: blink, bgchange, swing; 
  animation-duration: 1s, 1s, 2s; 
  animation-iteration-count: 2, 2, 3; 
  animation-direction: normal; 
}

<div class="swing">У моей машины четыре колеса, почему вращается только четвертое?</div> 
<div class="swing">У моей машины четыре колеса, почему вращается только четвертое?</div> 
<div class="swing">У моей машины четыре колеса, почему вращается только четвертое?</div> 
<div class="swing" id="ok">Не понимаю почему animation-iteration-count работает только для последней анимации?</div>