Animación en CSS3: after, before y hover

Una forma muy sencilla (quizás la más básica y por la que deberías empezar) de crear animaciones con CSS3 es valiéndote de pseudo-elementos y pseudo-clases.

Antes veamos lo esencial que necesitamos saber sobre estos dos recursos:

• Pseudo-elementos en CSS
  
• Pseudo-clases en CSS
  

Pseudo-elementos en CSS3

Los Pseudo-elementos son elementos por defecto que acompañan a los que hemos incluido en nuestro código.



De entre los diferentes Pseudo-elementos que hay, utilizamos :after y :before para nuestras animaciones. Como se puede ver en la imagen, estaremos haciendo referencia a esa zona creada por defecto antes y después de cada elemento que hayamos creado en nuestro HTML (aunque es cierto que la posición donde se vaya a mostrar esa zona no tiene necesariamente que ser antes o después, sino que lo podemos ubicar con position:absolute donde nosotros queramos en relación al elemento), y a dichas zonas les daremos características de las que nos valdremos para hacer efectos.

Pseudo-clases en CSS3

Una Pseudo-clase es un estado o un uso que se tiene sobre un elemento. Hay de diferentes tipos, y en este caso usaremos una Pseudo-Clase dinánimca :hover, que se activa cuando el ratón esté sobre el elemento al que se lo vayamos a aplicar (en el caso de las pantallas móviles que no tienen ratón, la activación se hace al tocar a modo de click dicho elemento).

De modo que la forma de crear efectos con CSS3 como los que veremos a continuación se vale de dos fases:

• Establecer unas características en un Pseudo-Elemento (en este caso usaremos el before).
  
• Cambiarle las características cuando suceda algo (en este caso con la Pseudo-Clase hover) para dar un efecto de animación.
  

Pero algo esencial para que esto tenga efecto es camuflar el pseudo-elemento.

Técnica de camuflaje

Todas las características que le hayamos dado al :before de nuestras cajas se cargarán en nuestro navegador junto con la página, por eso tenemos que controlar muy bien que no estropeen el efecto que se quiere lograr. Para ellos debemos intentar en muchos casos que nuestro :before no esté visible al usuario por lo que tenemos que camuflarlo. Se trata de hacer igual que un mago con su show de magia: esconder el truco, que no se vea, de lo contrario pierde el chiste.

Tres de las formas más sencillas son:

• Ponerle un ancho y alto de 0 para que parezca que no existe y después darle valores para que de sensación de que aparece.
  
• Poner el before con el mismo color que la caja a la que pertenece y ubicarlo dentro, luego se le cambia la posición y dará efecto de moverse.
  
• Ocultarlo con transparencia (opacity:0) y después mostrarlo (opacity:1).
  

A continuación veremos ejemplos de cada una de las formas de esconder nuestro truco de magia.

Efecto Esquina de página

Este efecto es muy vistoso, cuando el ratón se posa sobre el elemento aparece una esquina con un aspecto visual que da la sensación de que se esté doblando como si fuera una página.

Mira el video para ver el efecto, el camuflaje y así entenderás mejor el código:

Código :

.esquina_pagina {
  -webkit-transform: translateZ(0);
}

.esquina_pagina:before {
  content: '';
 /* Posicionamiento de la esquina */
  position: absolute;
  bottom: 0;
  left: 0;

 /* Características del cuadrado que da efecto de esquina doblada */
  width: 0;
  height: 0;
  background: -webkit-linear-gradient(45deg, 
      white 45%, #aaaaaa 50%, #cccccc 60%, white);
  box-shadow: 1px -1px 1px rgba(0,0,0, 0.4);

  -webkit-transition-duration: 0.3s;
}

.esquina_pagina:hover:before{
  width: 35px;
  height: 35px;
}

En el before del elemento hemos creado un cuadrado con un fondo degradado con inclinación de 45 grados, para que la primera parte sea blanca y parezca que se dobla la página, y luego se hace un sombreado de colores oscuros, además del borde sombreado que se le da simulando al que haría sobre el papel su propia esquina doblada.

Pero la clave de este efecto es el camuflaje que se ha hecho, porque este cuadrado existe siempre, desde el principio, sin embargo se ha creado con un alto y ancho de 0, y después en el hover se le aplica al before un alto y ancho de 35px y ahí es donde ese cuadrado con aspecto de esquina aparece con esas dimensiones.

Efecto Triángulo lateral

Consiste en hacer aparecer un triángulo al costado de la caja, posicionado en la mitad del lado. El camuflaje en esta ocasión se hace dando el mismo color al before que a la caja.

Mira el video para ver el efecto, cómo se esconde el truco y así entenderás mejor el código:

Código :

.triangulo_lateral {
  -webkit-transform: translateZ(0);
}

.triangulo_lateral:before {
  -webkit-transition-duration: 0.3s;
  content: '';
  /* Características que forman el tríangulo */
  border-color: transparent #a8cf45 
                transparent transparent;
  border-style: solid;
  border-width: 15px 15px 15px 0;

 /* Posicionamiento del Triángulo */
  left: 0;
  position: absolute;
  top: -webkit-calc(50% - 15px);
}

.triangulo_lateral:hover:before {
  left: -15px;
}

Lo único que se hace con este efecto es cambiarle la posición left al before cuando se haga el hover para que se desplace y sobresalga, mientras tanto el before estaba presente, sobre la caja, pero no se veía porque tenía el mismo color (##a8cf45). Tachán!

Efecto Triángulo fijo

Similar al anterior pero con una diferencia, esta vez en lugar de que parezca que es el triángulo lo que se desplaza, la sensación es que el triángulo se queda fijo y es la caja la que hace el movimiento que permite que el triángulo se vea.

Mira el video para ver el efecto, como se esconde el truco y así entenderás mejor el código:

Código :

.triangulo_fijo {
  -webkit-transform: translateZ(0);
}

.triangulo_fijo:before {
  position: absolute;
  content: '';
  left: -webkit-calc(50% - 20px);
  top: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent 
                #a8cf45 transparent;
  -webkit-transition-duration: 0.3s;
}

.triangulo_fijo:hover {
  -webkit-transform: translateY(20px);
}

.triangulo_fijo:hover:before {
  top: -20px;
}

En esta ocasión se desplazan ambas partes: la caja, y el before. ¿Por qué? Cuando la caja se va hacia abajo para que quede el before arriba, el before también se desplaza hacia abajo, ya que pertenece a la caja y lo acompaña por defecto, por eso aunque la caja se baje, hay que subir el before, de ahí que se cambien las propiedades de posicionamiento vertical de ambos.

Efecto Sombra fija

Este es un ejemplo de camuflaje con opacity. Consiste en elevar una caja y hacer aparecer abajo un fondo de degradado elíptico que simulará la sombra.

Mira el video para ver el efecto, el camuflaje y así entenderás mejor el código:

Código :

.sombra_fija {
  -webkit-transform: translateZ(0);
}

.sombra_fija:hover {
  -webkit-transform: translateY(-5px);
}

.sombra_fija:before {
  position: absolute;
  content: '';
  width: 90%;
  left: 5%;
  top: 100%;
  height: 10px;
  opacity: 0;
  background: -webkit-radial-gradient(center, 
    ellipse,  rgba(0, 0, 0, 0.35) 0%, 
              rgba(0, 0, 0, 0) 80%);
  -webkit-transition-duration: 0.3s;
}

.sombra_fija:hover:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
}

De nuevo ambos elementos se desplazan, la caja se eleva y el before junto con ella, por eso el before se baja, pero aun así no se ve, porque está transparente, de modo que se le quita la transparencia con opacity:1 y ya es visible esa sombra elípica que siempre estuvo ahí presente pero nunca vimos porque se transparentaba.

Combinación de animaciones keyframe con efectos en pseudo-clases y pseudo-elementos

Después de haber visto cómo hacer estos efectos podemos dar un salto, y combinarlos con animaciones keyframe. Para entender en qué consisten, cómo funcionan y ver algunos ejemplos, lee sobre animaciones con keyframes en css3.

Aquí tienes un ejemplo de cómo mejorar una animación simple como la anterior con keyframes, se nota que el efecto gana calidad.

Efecto Sombra móvil

El funcionamiento y el camuflaje es el mismo que en la sombra fija pero esta vez la caja se mueve hacia arriba y abajo constantemente, lo que debería producir un cambio en el aspecto de la sombra.
Por ello la sombra esta sincronizada, en tamaño y oscuridad, con el movimiento de la caja.

Mira el video para que veas el efecto y notarás cómo nuestras animaciones se hacen más vistosas combinándolas con keyframe:

Código :

/* CODIGO DE LA CAJA */
.sombra_movil {
  -webkit-transform: translateZ(0);
}

.sombra_movil:hover {
  -webkit-transform: translateY(-6px);
  -webkit-animation: 1.5s movercaja infinite;
}

@-webkit-keyframes movercaja {
  50% {
    -webkit-transform: translateY(-3px);
  }
}

/* CODIGO DEL BEFORE */
.sombra_movil:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, 
    ellipse,  rgba(0, 0, 0, 0.35) 0%, 
              rgba(0, 0, 0, 0) 80%);
  -webkit-transition-duration: 0.3s;
}

.sombra_movil:hover:before {
  opacity: 0.4;
  -webkit-transform: translateY(6px);
  -webkit-animation: 1.5s moversombra infinite;
}

@-webkit-keyframes moversombra {
  50% {
    -webkit-transform: translateY(3px);
    opacity: 1;
  }
}

Se ve más cool, ¿verdad? Simplemente hemos añadido los movimientos verticales y los cambios de transparencia en el before y de nuevo... Tachán!!!

Consejos para hacer animaciones

Abre tu mente, no te centres solo en hacer efectos en el hover y en el before, hay muchas más opciones, todas útiles usándose con criterio. Es cuestión de saber qué recurso utilizar para según qué efecto quieras lograr.

Si tienes más ideas o ejemplos compártelos! Por cierto, nos quedó pendiente los efectos en 3D, ¿recuerdan?

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.