JMiur [E]

Las transiciones son efectos que podemos agregar fácilmente a cualquier etiqueta y funcionarán en todos los navegadores excepto en Internet Explorer que aún no las ha implementado ni siquiera en las versiones más recientes.

Son simples, no dan problemas pero tienen una limitación, el CSS no reacciona a eventos como clicks, y en principio, sólo disponemos de la posibilidad de usar :hover, es decir, podemos cambiar algo cuando ponemos el cursor del ratón encima y hacer que ese cambio se anime.

En este ejemplo, hacemos que el ancho (width) cambie:
.demo {
  background-color: #456;
  color: #EEE;
  display: table-cell;
  font-size: 40px;
  height: 50px;
  text-align: center;
  padding: 10px;
  vertical-align: middle;
  width: 200px;
  -moz-transition: width 1s;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
.demo:hover {
  width: 500px;
}

HOLA

En impressivewebs.com nos dan otras ideas, para tratar de usar transiciones con otro tipo de eventos y algunos de ellos son muy interesantes; por ejemplo, usando :active en lugar de :hover.

:active es una pseudo-clase que podríamos decir que funciona de manera similar a un onclick ya que se ejecuta justamente cuando pulsamos el botón del ratón y se desactiva cuando lo soltamos.

Modificamos entonces un poco las reglas anteriores para que cambie el ancho, el alto y ya que estamos, también el tamaño de la fuente:
.demo {
  .......
    -moz-transition: width 1s, height 1s, font-size 1s;
    -webkit-transition: width 1s, height 1s, font-size 1s;
    -o-transition: width 1s, height 1s, font-size 1s;
    transition: width 1s, height 1s, font-size 1s;
}
.demo:active {
  font-size: 100px;
  height: 300px;
  width: 500px;
}
¿Cómo funcionará? Si hacemos click en el elemento y mantenemos pulsado el botón del ratón, este se irá ampliando hasta el máximo que hayamos establecido; si soltamos el botón, volverá a su estado natural.

HOLA

Algo similar se puede lograr en los formularios usando la pseudo-clase :focus que se activará cuando ingresemos un dato:
input.demo {
  background: #FFF;
  border: 2px solid #ABC;
  font-size: 20px;
  height: 30px;
  text-align: left;
  padding: 0 30px;
  width: 90px;
  -moz-transition: width 1s;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}
input.demoI:focus {
  width: 300px;
}



¿Y qué pasará en Internet Explorer? Nada; funcionarán perfectamente excepto que los cambios no se animarán así que son propiedades que pueden utilizarse sin generar conflictos.

17 comentarios:

Domin-Omega  

No las conocía... muchas gracias.

Responder
Graciela  

Jorge, días sin leerte, estoy tratando de realizar un video :O

Gracias por traer 'cositas' nuevas, que probaré más allá, que tengas buen día ahhh ¡Feliz día del estudiante! jejeje hoy nos vamos de picnic :P

Responder
JoseL  

¡Que bueno tu blog! ¡qúe bien construido y cuánta información útil!
¡Sigue así!

Responder
Adrián J. Messina  

Muy bueno, ideal para blogs como el mío donde los espacios son reducidos.
Gracias, Felíz primavera.
Un abrazo.

Responder
Johnny  

Estan bien los efectos, siempre podemos sacarle alguna utilidad. Como siempre, Internet Explorer sin dar la talla. Parece mentira, Microsoft con la de pasta que genera y tiene el navegador muerto de risa. ¡A ver si espabilamos, muchach@s de Gates! Saludejos.

Responder
Beben Koben  

this is a good resource for learn animations with CSS3 master ;)
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

Responder
Toda Tú  

Me gusta tu blog. Creo que me puede servir de mucho. Gracias por compartir tus conocimiento.
entodatu.blogspot.com

Responder
JMiur  

Domin-Omega:
Yo tampoco :D

Graciela:
¿Un video de esos tipo ulalá? :D

Gracias, JoseL

Un abrazo, Adrián.

Johnny:
Sí, es una pena que ninguna versión incluya estas cosas

Beben Koben:
The animation properties are more difficult; transitions are easy. I will see the article. Thanks.

Gracias, Toda Tú

Responder
Graciela  

Noooo jajaja es para ASI NO, primera vez que me meto por esos lados :P

Responder
JMiur  

Lástima. Pensé que se haría famosa :D

Responder
Felipe  

No habia visto este artículo, me estan tardando las actualizaciones por el feed |O
Muy muy bueno, me encantaron; si me permites, y a propósito de esta entrada, te comparto un meme dedicado a aquello de transicionitis, tal como lo bautizó la doctora Gem@
Meme :D

Responder
JMiur  

Ciidado, Felipe, la transicionitis es una enfermedad incurable :D

Responder
Graciela  

jajaja no quiero ser famosa, bue aunque pensándolo bien en cualquier momento saco el video 'ulalá', como usted dice, herramientas gratis tenemos :P

Responder
Gamaghostmagus  

Costumo usar jquery para criar animações com CSS3 , fica bem bacana .

Responder
JMiur  

Graciela:
Avise y lo publicitamos :D

Gamaghostmagus:
¿Y qué tiene que ver una cosa con la otra? CSS y JavaScript son dos herramientas distintas.

Responder
sanya  

gracias,es excelente tu blog,ya lo tengo de fav.y la verdad mi suenho es tener un blog asi,tiene de todo y no te aburris nunca saludos de un bloguero

Responder
JMiur  

Saludos, sanya. Gracias por el comentario.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR