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:

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru 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