Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Animacion de imagenes en css

Estas en el tema de Animacion de imagenes en css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/11/2014, 02:03
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 9 meses
Puntos: 6
Animacion de imagenes en css

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.
  #2 (permalink)  
Antiguo 05/11/2014, 05:41
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 9 meses
Puntos: 6
Respuesta: Animacion de imagenes en css

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

Código HTML:
Ver original
  1.   <div class="col-xs-12">
  2.    
  3.     <style>
  4.       .padre{position: relative;}
  5.      
  6.       .hijos{width: 30px; height: 30px;position: absolute}
  7.      
  8.       .hijo1{left: 0%; top: 0%;}
  9.       .hijo2{left: 0%; top: 100%;}
  10.       .hijo3{left: 100%; top: 0%;}
  11.       .hijo4{left: 100%; top: 100%;}
  12.      
  13.       .padre:hover{
  14.         -moz-animation: 2s iberis 1;
  15.         -webkit-animation: 2s iberis 1;
  16.       }
  17.      
  18.       @-moz-keyframes iberis {
  19.         0% {
  20.           .hijo1{left: 0%; top: 0%;}
  21.           .hijo2{left: 0%; top: 100%;}
  22.           .hijo3{left: 100%; top: 0%;}
  23.           .hijo4{left: 100%; top: 100%;}
  24.         }
  25.  
  26.         100% {
  27.           .hijo1{left: 45%; top: 45%;}
  28.           .hijo2{left: 55%; top: 45%;}
  29.           .hijo3{left: 55%; top: 45%;}
  30.           .hijo4{left: 55%; top: 55%;}
  31.         }
  32.       }
  33.  
  34.      
  35.     </style>
  36.    
  37.     <div class="padre" style="width: 300px; height: 300px; background-color: red">
  38.      
  39.       <div class="hijos hijo1" style="background-color: blue"></div>
  40.       <div class="hijos hijo2" style="background-color: greenyellow"></div>
  41.       <div class="hijos hijo3" style="background-color: yellow"></div>
  42.       <div class="hijos hijo4" style="background-color: violet"></div>
  43.      
  44.     </div>
  45.    
  46.   </div>
  #3 (permalink)  
Antiguo 05/11/2014, 16:26
Avatar de siddartha23  
Fecha de Ingreso: septiembre-2013
Mensajes: 357
Antigüedad: 10 años, 5 meses
Puntos: 39
Respuesta: Animacion de imagenes en css

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!!!
__________________
velarde23.com - Soluciones Web
  #4 (permalink)  
Antiguo 05/11/2014, 16:36
 
Fecha de Ingreso: mayo-2009
Mensajes: 742
Antigüedad: 14 años, 9 meses
Puntos: 6
Respuesta: Animacion de imagenes en css

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.

Etiquetas: animacion, color, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:35.