How can I start a multiple img css animation with one click?

Question

I would like to animate these images.

<img src="Catalogus.png" id="catalog"/>
<img src="Props.png" id="props"/>
<img src="Lights.png" id="lights"/>
<img src="Build.png" id="build"/>
<img src="Preset.png" id="preset"/>
<img src="KunstwerkVeranderen.png" id="art"/>

Each to a specific location like so:

.props{
  height: 70px;
  width: 70px;
  position: absolute;
  top: 560px;
  left: 1200px;
  -webkit-animation-name: propss; 
  -webkit-animation-duration: 1s; 
  animation-name: propss;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes props {
  0%   { left:1200px; top:560px;}
  100% { left:1200px; top:470px;}
}

The keyframes are different for each id, but I can't seem so find a way to trigger all of them with a single mouse-click. The idea is unfold all the images out of the starting position.

Hope you guys can help me with this.