[SOLUCIONADO] Animacion de imagenes en css

[AitorLopez]

Hola. Quiero hacer una animacion que haria lo siguiente:

Imaginar un cuadro de color rojo, por ejemplo. Lo que quiero es que, al poner el raton sobre el, baje de cada esquina un cuadrito de color azul, por ejemplo y se posicionen en el centro los cuatro cuadros

Gracias por la ayuda.

[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>
 

[siddartha23]

No te funciona por que dentro de los keyframes se usan propiedades no objetos.

Intenta esto a ver si te ayuda a hacer el efecto que buscas: a los .hijos añádeles 'transition: all 2s' para que se muevan gradualmente, luego borra desde la línea 14 hasta la 33 y añade esto para cada hijo: .padre:hover .hijo1{left: 45%; top: 45%;} , .padre:hover .hijo2{left: 45%; top: 55%;}, etc.

Veo que solo usas top y left en tus objetos con position relative, podrías usar también right y bottom para que cada uno se ubique en su propia esquina... suerte!!!

[AitorLopez]

Hola. Muchas gracias por responder. Efectivamente, me di cuesta despues que quería modificar objetos (una pena que no se pueda).
Debido a esto lo he hecho en jquery con animate pero para el caso, vienen siendo muy parecido a lo que tu has indicado.
Lo dicho, muchas gracias por tu respuesta.