Animaciones con CSS3

En el último post  revisamos cómo hacer animaciones con Javascript , esta vez hablaremos sobre cómo ejecutarla con CSS3, lo que permitirá escribir menos código. En este caso usaremos el selector hover y algunas propiedades CSS3 . Seguido, mostraré un ejemplo de animación con CSS3 .

Paso a paso para la animación con CSS3 .

1. Crear documento HTML 

Como lo haremos con Javascript necesitamos un documento HTML definido de la siguiente manera:

<div class="contenedor">
  <div clase="fila">
    <div class="col-sm-4 col-md-4">
      <img alt="Pozting thumbnail" class="center-block img-responsive" src="http://placehold.it/360x274">
      <div class="título-proyecto texto-centro">
        <h3 class="text-white text-center">Intercambios</h3>
        <p class="text-left">Swapps es una empresa de desarrollo de software para web y dispositivos móviles, que crea productos disruptivos, enfocados en la innovación.</p>
        <a class="btn btn-primary" href="#">Leer más</a>
      </div>
    </div>
  </div>
</div>

.título-proyecto{
  ancho: 100%;
  color:#fff;
  bloqueo de pantalla;
  fondo: rgba(010,010,010,0.7);
  relleno: 10px 20px;
  margen superior: -46px;
  posición: relativa;
  h3{
    margen: 0px;
    margen inferior: 7px;
    tamaño de fuente: 25px;
  }
}

2. Crear la animación en CSS3

Para hacer la animación en CSS3 confiaremos en las siguientes propiedades:

.título-proyecto{
  &:flotar{
    altura: 275px;
    índice z: 999;
    posición: relativa;
    -webkit-animation:mymove 1s;
    animación:mimovimiento 1s;
    número de iteraciones de animación: 1;
    modo de relleno de animación: adelante;
  }
}
@-webkir-keyframes mymove{
  desde {abajo: 0px;}
  a{
    abajo: 228px;
    acolchado superior: 60px;
  }
}
@fotogramas clave mi movimiento{
  desde {abajo: 0px;}
  a{
    abajo: 228px;
    acolchado superior: 60px;
  }
}

3. Seleccionar elementos para animar con selector hover 

El selector hover es usado para seleccionar elementos cuando pasa el mouse sobre ellos. Así que aplique las propiedades, solo en ese caso, con .title-project: hover y la propiedad de animaciones .

En consecuencia, esta propiedad llevará el nombre de la animación que se creará y el tiempo que durará. Para ello es importante usar el atributo: animation-fill-mode: forwards.

Esta última obligará a la animación a permanecer en su posición final, en este caso, la posición final es bottom: 228px .

4. Indicar tiempo

Una propiedad importante es animation-iteration-count : 1, ya que indica el tiempo que se repetirá la animación mientras mantenemos el cursor arriba del elemento.

Le podemos dar a .title-project la propiedad animation-timing-function  con mild-out como el valor. De modo  que podamos ajustar la forma en que se muestre la animación.

5. Crear la animación

Por último, crearemos una animación mymove y la palabra clave @keyframes se encarga de crearla. 

Esta regla usa dos parámetros: from (que indica el origen de la animación y to (que indica a dónde irá). Asignaremos el valor inferior en ambos casos .

Consejo final: 

Note que en CSS3 debemos usar prefijos para asegurar compatibilidad entre navegadores, en este caso el prefijo usado es -webkit- , que funcionará en Google Chrome , Safari y  Opera .

Para concluir, podemos notar que hacer una animación en CSS3 puede ser realmente fácil, pero debemos recordar que no todos los navegadores son compatibles con CSS3, por lo que corremos el riesgo de implementar animaciones no funcionales para algún navegador específico.

Por lo anterior, para garantizar la compatibilidad total en todos los navegadores resulta mejor utilizar Javascript para animar. De todos modos, ¡la decisión depende de usted!

Para ver el resultado visita el Pen Animation with css3 por Bryan ( @brayan15 ) en CodePen .