Animacion de imagenes en css

[AitorLopez]

Mirad, he ido avanzando con el tema y he llegado hasta aqui, pero no se porque no me funciona

Código HTML:

<section>
  <div class="col-xs-12">
    
    <style>
      .padre{position: relative;}
      
      .hijos{width: 30px; height: 30px;position: absolute}
      
      .hijo1{left: 0%; top: 0%;}
      .hijo2{left: 0%; top: 100%;}
      .hijo3{left: 100%; top: 0%;}
      .hijo4{left: 100%; top: 100%;}
      
      .padre:hover{
        -moz-animation: 2s iberis 1;
        -webkit-animation: 2s iberis 1;
      }
      
      @-moz-keyframes iberis {
        0% {
          .hijo1{left: 0%; top: 0%;}
          .hijo2{left: 0%; top: 100%;}
          .hijo3{left: 100%; top: 0%;}
          .hijo4{left: 100%; top: 100%;}
        }
 
        100% {
          .hijo1{left: 45%; top: 45%;}
          .hijo2{left: 55%; top: 45%;}
          .hijo3{left: 55%; top: 45%;}
          .hijo4{left: 55%; top: 55%;}
        }
      }
 
      
    </style>
    
    <div class="padre" style="width: 300px; height: 300px; background-color: red">
      
      <div class="hijos hijo1" style="background-color: blue"></div>
      <div class="hijos hijo2" style="background-color: greenyellow"></div>
      <div class="hijos hijo3" style="background-color: yellow"></div>
      <div class="hijos hijo4" style="background-color: violet"></div>
      
    </div>
    
  </div>
</section>