Transiciones sin usar :hover

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.