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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

1 comentarios:

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

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