.soldier1, .soldier2, .soldier3 {
  transform-style: preserve-3d;
  position: absolute;
  display: block;
  height: 9em;
  width: 3em;
  margin: 0;
  background: url(/games/cascade-of-duty/images/soldier/soldier.png) transparent;
  background-size: cover;
  animation:  turnSoldierLeft var(--turnSpeed) infinite linear, turnSoldierRight var(--turnSpeed) infinite linear, moveSoldier1SideToSide var(--soldier1Speed) infinite linear;
  animation-play-state: paused, paused, running;
  top: -5em;
}

.soldier2 {
  animation:  turnSoldierLeft var(--turnSpeed) infinite linear, turnSoldierRight var(--turnSpeed) infinite linear, moveSoldier2SideToSide var(--soldier2Speed) infinite linear;
  animation-play-state: paused, paused, running;
  transform: translateX(-20em) rotateY(90deg);
}

.soldier3 {
  animation:  turnSoldierLeft var(--turnSpeed) infinite linear, turnSoldierRight var(--turnSpeed) infinite linear, moveSoldier3SideToSide var(--soldier3Speed) infinite linear;
  animation-play-state: paused, paused, running;
  transform: translateZ(-20em);
}

@keyframes turnSoldierLeft {
  to {
    transform: rotateY(-9999deg);
  }
}

@keyframes turnSoldierRight {
  to {
     transform: rotateY(9999deg);
  }
}

@keyframes moveSoldier1SideToSide {
    0%   { left: 0em; }
    25%  { left: 7em; }
    50%   { left: 0em; }
    75% { left: -10em; }
    100% { left: 0em; }
}

@keyframes moveSoldier2SideToSide {
  0%   { left: 0em; }
  25%  { left: 7em; }
  50%   { left: 0em; }
  75% { left: -10em; }
  100% { left: 0em; }
}

@keyframes moveSoldier3SideToSide {
  0%   { left: 0em; }
  25%  { left: 7em; }
  50%   { left: 0em; }
  75% { left: -10em; }
  100% { left: 0em; }
}

:target.turnRight ~ .scene .soldier1, :target.turnRight ~ .scene .soldier2, :target.turnRight ~ .scene .soldier3 {
    animation-play-state: running, paused, running;
}

:target.turnLeft ~ .scene .soldier1, :target.turnLeft ~ .scene .soldier2, :target.turnLeft ~ .scene .soldier3 {
  animation-play-state: paused, running, running;
}