Computación Gráfica

TRANSICIONES CON CSS3:

Las transiciones CSS permiten que los cambios de valores en las propiedades de un elemento sucedan de una forma gradual durante un periodo de tiempo determinado.
Es decir, las transiciones nos permiten que el cambio de de valor a otro en las propiedades de CSS de una etiqueta se produzca de forma animada en base a unos parámetros que determinarán cómo se llevará a cabo dicha transición.
En este caso tenemos la posibilidad de usar CSS para algo que hasta hace poco se hacía exclusivamente con JavaScript.
El rendimiento de estas transiciones en los navegadores que lo soportan es realmente impresionante, mucho mejor que su equivalente cambiando propiedades mediante JavaScript.
Sintaxis:
La sintaxis general de las transiciones se compone de las siguientes propiedades:
transition-property (la propiedad o propiedades sobre las que se va a realizar la transición).
transition-duration (la duración de la transición).
transition-timing-function (la función de easing que queremos utilizar).
transition-delay (retardo antes de iniciar la transición).

Vamos a crear un menú muy sencillo de opciones cuyos elementos sean animados.
Para esto vamos a crear una lista de enlaces y haremos que al pasar el ratón sobre cada uno de ellos estos cambien sus propiedades de tamaño, rellenado y color, mejorando la respuesta visual del interface con esas transiciones.

Alumnos Tercer Año:

• » Fuentes, Luciano
• » Kramm, Mariana
• » Lucchesi, Daniela
• » Morgenstern, Elizabeth
• » Oyarzo, Martín
• » Pardini, Ailín
• » Roncal, Solana

En el HTML:

<ul id="menuOpciones">
<li><a href="#">&raquo; Fuentes, Luciano</a></li>
<li><a href="#">&raquo; Kramm, Mariana</a></li>
<li><a href="#">&raquo; Lucchesi, Daniela</a></li>
<li><a href="#">&raquo; Margentern, Elizabeth </a></li>
<li><a href="#">&raquo; Oyarzo, Martín</a></li>
<li><a href="#">&raquo; Pardini, Ailín</a></li>
<li><a href="#">&raquo; Roncal, Solana </a></li>
</ul>

En el CSS:

#menuOpciones {
	margin: 0;
	padding: 0;
	list-style: none;
	height:260px;
}
#menuOpciones li a {
	display: block;
	width: 200px;
	padding: 4px;
	margin: 1px 0;
	text-align: right;
	background: #D0CFD1;
	color: #444;
	text-decoration: none;
	-webkit-transition-property: width, padding, background-color, color;
	-webkit-transition-duration: .3s;
	-webkit-transition-timing-function: ease, ease, linear, linear;
}
#menuOpciones li a:hover {
	width: 210px;
	padding: 10px;
	background-color: #0387DC;
	color: #fff;
}

Como puede verse, en transition-property enumeramos las propiedades que van a cambiar mediante una transición.
En transition-duration, al especificar un sólo parámetro (.3s) se entiende que la duración es la misma para todas las transiciones y, finalmente, en transition-timing-function le decimos que las dos primeras transiciones (width y padding en este caso) se realicen con ease y las otras dos (background-color y color) se hagan de forma lineal.
Gracias a esto podemos realizar transiciones complejas de forma sencilla sin tener que recurrir a JavaScript, ni a jQuery ni a otras librerías.

• Este ejemplo sólo funciona en navegadores WebKit, como Safari y Chrome.

Interesantes Ejemplos para investigar:
• Generador de Transiciones
• leaverou.github.com
• lea.verou.me
• Propiedades de Transiciones
• alexdunphy.github.com
• Otro
• Otro

• Tutorial del ultimo ejemplo:www.elclubdelprogramador.com

TRABAJO PRACTICO TRANSICIONES:
Adaptar algunos de estos ejemplos a un diseño propio de lbre elección, puede ser a modo de portfolio o de intro.

Volver arriba