Hacker of the Web
Tus ideas en código!...y mas

CSS3: Propiedad Transition, crea animaciones solo con CSS

Para nosotros los creadores de la magia en internet, los que hacemos posible que los internautas pasen un buen (o mal) rato navegando por internet, para nosotros que siempre estamos tratando de llevar lo mejor a nuestros amigos lectores, hay una buena noticia. Gracias a los ultimos desarrollos del lenguaje CSS podremos ofrecer una mejor experiencia en nuestros sitios con el menor esfuerzo.

Esta es una de esas propiedades que cambian por completo la forma de renderizar las páginas web para un navegador web, o al menos para los que estamos acostumbrados al oscuro CSS2. Y es que Mediante esta propiedad de CSS3 podemos crear cualquier tipo de animación en nuestro sitio web. Ya sea girar, aumentar de tamaño, cambiar color de fondo, color de letra o el color de sombra a cualquier elemento de nuestros sitios web, veamos de que hablo:
CSS funny!
Aunque se vea un poco lento y feo, se ve interesante no? la mejor parte de esto es que podremos hacer que este tipo de cosas funcionen sin tocar una sola línea de código de programación y lo haremos de una manera tan sencilla que en menos de lo que piensas lo estarás aplicando a tu sitio.CSS3 Funny

Sintaxis

Entrando en materia, la sintaxis de esta propiedad se puede colocar de dos formas, pero si me preguntaran por la manera mas sencilla de hacerlo sería de la siguiente forma:
transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo];
La segunda manera de aplicarlo es separando la declaración en cuatro diferentes propiedades y aunque suene complicado no lo es, basta con hacerlo de la siguiente manera:
transition-property:[Propiedad CSS];
transition-duration:[Duración];
transition-timing-function:[Función de Tiempo];
transition-delay:[Retardo];
Esta segunda forma de aplicarlo es interesante si quieres recordar que es lo que estas tocando al momento de hacer alguna modificación en el futuro, pero si sabes lo que estas haciendo o si quiere hacerlo de manera práctica te recomiendo que uses la manera sencilla, es la que yo más utilizo.

Para aplicar esto a nuestro HTML es igual que cualquier otra propiedad CSS. Aquí te dejo un ejemplo de como se implementaría en todos los párrafos de un sitio web:
En este ejemplo estamos afectando a todas las etiquetas <p> con la propiedad transition
p {
  transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo];
}
Si te preguntas que es lo que puedes hacer con esta interesante propiedad de CSS, a continuación te explicamos que es lo que puedes colocar en cada campo de la declaración. Sólo para asegurar que tengas todo lo que necesitas para crear las animaciones que te estas imaginando en este momento.

[Propiedad CSS]

[Tiempo]

[Función de Tiempo]

[Retardo]

Ejemplos

Ahora veamos un ejemplo de la propiedad Transition en funcionamiento, para disolver dudas siempre he dicho que es mejor ver un ejemplo funcionando:
Código CSS:
#ej1{
  width:400px;
/* Aqui colocamos la transicion para cada navegador */
  -webkit-transition:all 1s ease-out;  /* Chrome y Safari */
  -o-transition:all 1s ease-out;  /* Opera */
  -moz-transition:all 1s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 1s ease-out;   /* Internet Explorer */
  transition:all 1s ease-out;  /* W3C */
}
#ej1:hover{
  width:450px;
}
Código HTML:
<div id='ej1'>Este es cualquier elemento de mi página web</div>
Ejemplo:

Este es cualquier elemento de mi página web





Código CSS:
#ej2{
  width:400px;
/* Aqui colocamos la transicion para cada navegador */
  -webkit-transition:all 1s ease-out;  /* Chrome y Safari */
  -o-transition:all 1s ease-out;  /* Opera */
  -moz-transition:all 1s ease-out;  /* Mozilla Firefox */
  -ms-transition:all 1s ease-out;   /* Internet Explorer */
  transition:all 1s ease-out;  /* W3C */
}
#ej2:hover{
  text-shadow:0 0 20px black;
  color:#555;
  box-shadow:0 0 10px 0 black;
}
Código HTML:
<div id='ej1'>Este es cualquier elemento de mi página web</div>
Ejemplo:

Este es cualquier elemento de mi página web

Cada quién tiene ideas diferentes así que seamos creativos :P!!!

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

18 comentarios !

Claudio dijo...

Excelente!!!. Esto es el principio de lo que se viene con HTML5 y CSS3, era hora que hagan estos cambios pero por lo visto van a recuperar el tiempo perdido. Muy buenos los efectos que usas en la web.

Anónimo dijo...

Me parece muy interesante, pero quisiera saber como se puede hacer que clicando en una imagen, se expanda un objeto; y clicando en otra se contraiga.

Anónimo dijo...

muy buena información gracias por la explicación, es fácil de entender :), que bien que haya personas que comparten sus conocimientos :)

Anónimo dijo...

Que pasada. Gracias por la información.

Anónimo dijo...

muy bueno, re bien explicado, gracias por el articulo

Nextor dijo...

Hola. no puedo ejecutar ninguno de los dos codigos, puede ser porque lo coloco en algun lugar que esta ejecutando una funcion? ejemplo, un Link..
Gracias

Anónimo dijo...

si claro! y iexplorer?

Anónimo dijo...

Muy buen ejemplo para animar de manera sencilla. gracias

Anónimo dijo...

no funciona en IE... nisiquiera en el 9

Anónimo dijo...

que podemos hacer para que funcionen en IE??

Anónimo dijo...

un evento me puede modificar una propiedad de otro elemento? si hago un cambio en un div, el contenedor en el que se encuentra, se acomoda al tamaño de este div automticamente?
agradezco y manito arriba

Carlos Germán dijo...

Hola, me he pasado por tu blog en boosterblog.es y me a gustado bastante, te e dejado +5 espero estemos en contacto y compartamos ideas ;).

SIMON RINCON dijo...

Muchas Gracias Excelente apoyo.

Anónimo dijo...

gracias amigo me sirvio mucho tu ayuda

iWOO dijo...

Excelente! El mejor explicado que leí hasta ahora! (y)

Henry dijo...

Muy bien explicado. gracias.

IGnacio dijo...

excelente aporte. Gracias me sirvio de mucha ayuda

Unknown dijo...

Excelentes articulo, gracias por compartir tus conocimientos.
Hice un carrusel pequeno de imagenes con su transition, pero en safri no lo puedo vcer a pesar de que puse sus prefijos de -moz- y -webkit-..por ejemplo en mi ipad no lo veo y en mi iphone tampoco.
Yo puse en los estilos el cursor:pointer, no se si porque uso los dedos no salga ...disculpa mi novatada ..gracias


Página Principal
Arriba