ES

www.codigo-facil.com > CSS3 Transition

CSS3 - Transition

Introduccion


En este capitulo vamos a ver como crear efectos de forma secilla, sin la utilizacion de JavaScript, gracias a la nueva especificacion "CSS3". Esto quiere decir que ahora podemos cambiar valores CSS de manera progresiva durante un tiempo determinado gracias a la porpiedad "transition".

Compatibilidad con los navegadores :

Ademas de la comtabilidad con CSS3, es posible que debamos utilizar una serie de prefijos segun el navegador para su correcta visualizacion:
  • -moz- para Firefox
  • -webkit- para Chrome y Safari
  • -o- para Opera
  • -ms- para Internet Explorer
Las propiedades que podemos modificar mediante una transicion son las siguientes :
  • background-color
  • background-image (solo grdientes)
  • background-position (porcentaje y pixeles)
  • border-color (y sus variantes left ,right, top, bottom)
  • border-width (pixeles y sus variantes left, right, top, bottom)
  • border-spacing (pixeles y sus variantes left, right, top, bottom)
  • bottom (porcentaje y pixeles)
  • color
  • crop
  • font-size (pixeles y porcentaje)
  • font-weight
  • grid
  • height (pixeles y porcentaje)
  • left (pixeles y porcentaje)
  • letter-spacing (pixeles)
  • line-height (numero, porcentaje, pixeles)
  • margin (pixeles y sus variantes left, right, top, bottom)
  • max-width (porcentaje y pixeles)
  • max-height (porcentaje y pixeles)
  • min-width (porcentaje y pixeles)
  • min-height (porcentaje y pixeles)
  • opacity (numero entre 0 y 1)
  • outline-color
  • outline-offset
  • outline-width (pixeles)
  • padding (pixeles y sus variantes left, right, top, bottom)
  • right (pixeles y porcentaje)
  • text-indent (pixeles y porcentaje)
  • text-shadow
  • top (pixeles y porcentaje)
  • transform (con todas sus posibilidades)
  • vertical-align
  • visibility
  • width (pixeles y porcentaje)
  • word-spacing (pixeles y porcentaje)
  • word-spacing (pixeles y porcentaje)
  • z-index
  • zoom

Sintaxis


La propiedad transition admite diferentes variantes para su declaracion:

Declaracion extendida.

Esta declaracion consiste en definir la propiedad transition incluyendo todos sus parametros.

  1. <style>
  2. #capa1{
  3.    transition-property: all;
  4.    transition-duration: 0.5s;
  5.    transition-timing-function: ease;
  6.    transition-delay: 0s;
  7. }
  8. </style>

Cada parametro tiene su funcion y no sirve para personalizar la transicion, a continuacion una breve explicacion de la utilidad de cada uno :
  • transition-property : Nos sirve para especificar q que propiedad CSS se va a aplicar la transicion. En el ejemplo anterior hemos utilizado all, esto quiere decir que la transicion se puede aplicar a cualquier parametro CSS.
  • transition-duration : Nos sirve para especificar la duracion de la transicion.
  • transition-timing-function : Se utiliza para poder definir la evolucion de la transicion durante el tiempo de ejecucion de la misma. Mas adelante veremos mas sobre este parametro y sus posibilidades.
  • transition-delay : Permite definir un retardo antes de ejecutar la transicion.

Declaracion extendida aplicada a varias propiedades CSS.


En el ejemplo anterior hemos visto como definir una transicion que se disparara al cambiar cualquier propiedad CSS a la que modifiquemos su valor. A continuacion vamos a ver como definir transiciones que se disparen unicamente para las propiedades CSS que nostros indiquemos.

  1. <style>
  2. #capa1{
  3.    transition-property: margin-left background;
  4.    transition-duration: 0.5s 0.5s;
  5.    transition-timing-function: ease ease;
  6.    trasnition-delay: 0s 0s;
  7. }
  8. </style>

Como podemos ver basta con indicar las propiedad CSS a la cual queremos que afecte la transicion separadas por espacios, asignando sus correspondientes valores de configuracion.
Declaracion abreviada.

Existe la posibilidd de simplificar mucho mas la declaracion de las transiciones, obviando la inclusion de sus parametros. Nuestro primer ejemplo quedaria de la siguiente menera utilizando la declaracion abreviada ;

  1. <style>
  2. #capa1{
  3.   transition : all 0.5s ease 0s;
  4. }
  5. </style>

Como podemos ver es todavia mas sencillo definir una transicion, basta con incluir los parametros de configuracion separados por espacios.

Declaracion abreviada aplicada a varias propiedades CSS.

Vamos a ver como definir diferentes transiciones vinculadas a propidades CSS utilizando este metodo abreviado. El ejemplo anterior quedria de la siguiente forma :

  1. <style>
  2. #capa1{
  3.   transition : margin-left 0.5s ease 0s, background 0.5s ease 0s;
  4. }
  5. </style>

Como se puede ver basta con separar cada propiedad con comas y ya podemos incluir todas las que queramos.

Algunos ejemplos :

Ejemplo sencillo aplicando un unico efecto :


Codigo para su implementacion :

  1. <style>
  2.   #efecto1{
  3.     width : 300px;
  4.     height : 300px;
  5.     background-color : #eeeeee;
  6.   }

  7.   #elemento1{
  8.     width : 150px;
  9.     height : 150px;
  10.     background-color : #999999;
  11.     -moz-transition : all 1s;
  12.     -ms-transition : all 1s;
  13.     -webkit-transition : all 1s;
  14.     transition : all 1s;
  15.   }

  16.   #elemento1:hover{
  17.     -moz-transform : rotate(405deg);
  18.     -webkit-transform : rotate(405deg);
  19.     -ms-transform : rotate(405deg);
  20.     transform : rotate(405deg);
  21.   }
  22. </style>

  23. <div id="efecto1">
  24.   <div id="elemento1">
  25.   </div>
  26. </div>




Ejemplo con varias efectos encadenados :


Pasa el raton por aqui

Codigo para su implementacion :

  1. <style>
  2. #efecto2{
  3.   width : 300px;
  4.   height : 300px;
  5.   background-color : #eeeeee;
  6. }

  7. #elemento2{
  8.   width : 150px;
  9.   height : 150px;
  10.   background-color : #999999;
  11.   -ms-transition : margin-left 1s ease 0s,-ms-transform 1s ease 1s;
  12.   -webkit-transition : margin-left 1s ease 0s,-webkit-transform 1s ease 1s;
  13.   -moz-transition : margin-left 1s ease 0s,-moz-transform 1s ease 1s;
  14.   transition : margin-left 1s ease 0s,transform 1s ease 1s;
  15. }

  16. #efecto2:hover #elemento2{
  17.   margin-left:150px;
  18.   transform : rotate(405deg);
  19.   -moz-transform : rotate(405deg);
  20.   -ms-transform : rotate(405deg);
  21.   -webkit-transform : rotate(405deg);
  22. }
  23. </style>

  24. <div id="efecto2">
  25.   <div id="elemento2">
  26.   </div>
  27.   <br>
  28.   <div style="text-align:center">
  29.       Pasa el raton por aqui
  30.   </div>
  31. </div>

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
0