Animaciones y Transformaciones con CSS3

31/Ene/2011 423

Se puede ver un aumento en el uso de CSS3 en sitios web de amplio uso, y actualmente es un diferencial a la hora de atraer y enganchar al usuario. Aunque sé que es pronto para sumergirse totalmente en estas aguas, no perdemos nada con jugar un poco con transiciones y animaciones en CSS3.


NOTA: Aún es necesario el uso de browsers muy modernos, como Safari 5 y Chrome 10. Firefox 3.6 anda pero no ofrece todo el soporte que quisiéramos (aún).

Transiciones

Su característica es cambiar una propiedad (o un grupo de ellas) en un período de tiempo determinado. Una ventaja por sobre Javascript es su degradación, ya que si esta propiedad no es soportada por el browser, la animación simplemente no es mostrada.

El siguiente código muestra el aumento del ancho de un <div> en un segundo cuando el mouse se posiciona sobre él. Luego, cuando el mouse sale del <div> su ancho vuelve a la posición inicial en 2 segundos:

.prueba1 {
   margin: 10px;
   width: 200px;
   height: 200px;
   background: #f00;
   border: 1px solid #666;
   transition: all 1s ease;
}
   .prueba1:hover{
      width: 400px;
      transition: all 2s ease;
    }

Ver ejemplo 1

A continuación, una animación compuesta: dado un estado inicial se define nuevo width, height y background-color:

.prueba2 {
   margin: 10px;
   width: 200px;
   height: 200px;
   background-color: #f00;
   border: 1px solid #666;
   transition-property: width, height, background-color;
   transition-duration: 0.5s, 1s, 1s;
   transition-timing-function: ease, ease-out;
   transition-delay: 0s ,0.5s, 1.5s;
  }
   .prueba2:hover {
      width: 400px;
      height: 300px;
      background-color: #fc0;
      transition-property: width, height, background-color;
      transition-duration: 0.5s, 0.5s, 0.5s;
      transition-timing-function: linear, linear;
      transition-delay: 0s ,0.5s, 0.5s;
   }

Ver ejemplo 2

Propiedades:

transition-property:
Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.
transition-duration:
Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.
transition-timing-function:
Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.
transition-delay:
Tiempo en que la animación debe pausarse antes de comenzar.

Transformaciones:

Existen 4 tipos de valores para transformar elementos HTML mediante CSS3:

Skew:
desplazamiento de los ejes horizontales.
Scale:
modificación de la escala del elemento.
Rotate:
cambio de rotación del mismo definido en grados.
Translate:
desplazamiento del elemento desde su posición original.

Ver ejemplo 3

Estas propiedades pueden ser utilizadas en la gran mayoría de los browsers modernos, con sus debidos prefijos como pueden notar en el código fuente del ejemplo.

Además, puedes comenzar a mezclar transformaciones con animaciones para lograr efectos como el siguiente (con Safari/Chrome):

Mouse over para que esto se vuelva loco.
#divloco div {
   height: 100px;
   width: 100px;
   border: 1px solid #f00;
   margin: 10px auto;
   background: #ccc;
   text-align: center;
   transition: all 2s ease-in-out;
}
   #divloco div:hover, #divloco div.hover_effect {
      transform: rotate(720deg) scale(2,2);
   }

Links:

Comentarios

  1. bactrim and alcohol [#]

    https://bactrimsulfamethoxazole.com/ trimethoprim sulfamethoxazole side effects

  2. zyrtec 5 mg [#]

    cetirizine warnings – http://allergyd.com

  3. best price for cetirizine [#]

    what is nurtec – https://allergyd.com

  4. target zyrtec price [#]

    cetirizine dose – http://allergyd.com

  5. drineedvpq [#]

    roaccutane side effects https://accutaneisotretinoine.com/

  6. modafinilindia [#]

    where to buy modafinil reddit buy provigil

  7. prednisoneuses [#]

    prednisone withdrawal symptoms steroid side effects

  8. provigil100mg [#]

    modafinil online modafinil side effects

  9. bactrim dosage [#]

    bactrim for sinus infection bactrim ds dosage

  10. stromectolforte.com [#]

    ivermectin 3mg https://stromectolforte.com/# ivermectin dosage for humans in pounds stromectol price us

  11. pharmacepticacom [#]

    sildenafil 40 mg over the counter https://pharmaceptica.com/

  12. stromectolforte.com [#]

    stromectol https://stromectolforte.com/ stromektol fiyatД± ivermectin dan lain-lain

  13. steroidsprednisone [#]

    https://prednisoloneacetateophthalmic.com/ prednisone withdrawal

  14. modafiniladhd [#]

    buy modalert provigil 100mg

  15. can humans take ivermectin paste [#]

    how much does ivermectin cost https://stromectolforte.com/ ivermectin for humans where to buy locally near me buy ivermectin

  16. ivermectina comprar en lГ­nea [#]

    buy ivermectin 12 mg for humans https://stromectolforte.com/ ivermectin for humans for sale ivermectin 3 mg for humans

  17. GustavoVet [#]

    best paper writing service reviews
    essay writing online

  18. prednisoneonline [#]

    cheap prednisolone prednisolone acetate ophthalmic suspension

  19. provigilvsmodafinil [#]

    modafinil smart drug modafinil dosage

  20. steroidprednisone [#]

    prednisolone for cats what does prednisone do

  21. buy isotretinoine [#]

    roaccutane side effects roaccutane side effects

  22. provigiluses [#]

    https://modafilmodafinil.com/ provigil medication

CSSLab