jueves, 26 de abril de 2012

Transiciones con CSS3: Transition


¿De que se trata se tratan la propiedad Transition en CSS3?, bueno esto es una pregunta de lo más simple, esta nueva implementación para CSS que de momento funciona en todos los navegadores salvo Internet Explorer, una de las razones por las que debemos de dejar de usarlo, es una propiedad que hace una transición entre dos reglas, una de ellas una pseudo-clase como :hover, :active y :focus

Podemos ver tres ejemplos con tres atributos CSS estándar (Pongan el cursor encima):

Aplicado a Background

Aplicado a Width

Aplicado a Padding

El resultado es increíble y las posibilidades extensas.

Cuenta con varias propiedades:

  • transition-property especifica a que propiedad CSS se le aplica
  • transition-duration Define el tiempo de transición que va a tomar en segundos por ejemplo .1s (1/10 de segundo), 2s (2 sedundos), .5s (1/2 de segundo).
  • transition-timing-function define la forma en que se calculará la transición, por defecto "ease"
  • transition-delay Define el tiempo de retraso para que inicie la transición.

Como en todas las reglas CSS con varias propiedades puede resumirse dentro de una misma línea solamente usando
transition: "propiedad" "retraso de transición" "función" "tiempo de transición";
Un ejemplo simple como el que sirvió para hacer las transiciones de arriba sobre background-color
transition: background-color .5s;
Esto solamente se resume a propiedad y tiempo de transición, como se usa, el caso en específico crearemos dos reglas CSS que aplicaremos con class o id

La primera es a donde se aplica la propiedad transition, la segunda es la seudo clase, para este caso :hover, a pesar de que funciona en la mayoría de los navegadores (Salvo Internet Explorer que no funciona), estos requieren el prefijo "-moz-", "-webkit-" y "-o-" para Mozilla, Safari, Opera y Chrome.
.transition1
{
background:#F19A00;
-webkit-transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
}
.transition1:hover
{
background:#fff;}
Como ven hemos aplicado la misma regla transition para cada motor de navegador el primer background sera el color por defecto y el segundo a donde aplicamos :hover a lado de la regla como si se tratara de la etiqueta A para vínculos (a:hover), que al poner el cursor encima se inicia la transición. podemos cambiar background-color con cualquier otra propiedad css poniendo dos valores uno para la regla normal y otro para :hover.

Ahora resta aplicarlo a una div con class (Si usan las reglas CSS de este ejemplo recuerden usar padding y width para el ancho del cuadro porque yo he simplificado el CSS a su mínima expresión):
<div class="transition1">
Aplicado a Background
</div>

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

1 comentarios:

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com