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

Estas en: > > CSS3: Propiedad Transition, crea animaciones solo con CSS

CSS3: Propiedad Transition, crea animaciones solo con CSS

Esta es una de esas propiedades que cambian por completo la forma de renderizar las páginas web para un navegador web. 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!
En este lento ejemplo se puede ver con detalle la transición de un estado a otro, pero no te asustes que se aplica de una manera muy sencilla. A lo largo de esta entrada explicaré como puedes aplicarlo a tu sitio.CSS3 Funny

Sintaxis

Esta propiedad se puede colocar de dos formas, sin embargo la manera mas sencilla de colocarlo es de la siguiente manera directa: 
transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo];
 O también se puede implementar de manera separada, la sintaxis de esta otra forma es de la siguiente: 
transition-property:[Propiedad CSS];
transition-duration:[Duración];
transition-timing-function:[Función de Tiempo];
transition-delay:[Retardo];
 Se coloca de la misma manera que cualquier otra propiedad de CSS, como la de "background" o "color". Para dejarlo mas claro, mira un ejemplo de su utilización:
En este ejemplo estamos afectando a todas las etiquetas <p> con la propiedad transition
p{
  transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo];
}
A continuación te explicaremos cuales son las opciones que nos dan cada sub-propiedad para poder comenzar a crear nuestras animaciones de una manera mas original. Comenzaremos con la primer sub-propiedad.

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

Por: Santy Hdz
En que se publicó
Etiquetas , , ,
#

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:

Sólo 1 comentario !

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.


Página principal
Arriba