En el último post sobre animaciones hablamos sobre cómo hacer animaciones con Javascript, esta vez hablaremos sobre cómo hacer lo mismo con CSS3. Cabe mencionar que con CSS3 escribiremos menos código, en este caso usaremos el selector hover y algo de propiedades CSS3. Seguido, le  mostraré cómo hacer la animación con CSS3.

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

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-4">
      <img alt="Pozting thumbnail" class="center-block img-responsive" src="http://placehold.it/360x274">
      <div class="title-project text-center">
        <h3 class="text-white text-center">Swapps</h3>
        <p class="text-left">Swapps is a software developing company for web and mobile devices, which creates disruptive products, focused on innovation.</p>
        <a class="btn btn-primary" href="#">Read more</a>
      </div>
    </div>
  </div>
</div>
A diferencia del ejemplo anterior, no necesitaremos Javascript pero vamos a escribir algunas líneas CSS, aquí está el código:

Definimos las propiedades iniciales de nuestra clase, son casi los mismos estilos que utilizamos en la publicación anterior, pero en este caso no vamos a utilizar la clase de inicio.

.title-project{
  width: 100%;
  color:#fff;
  display: block;
  background: rgba(010,010,010,0.7);
  padding: 10px 20px;
  margin-top: -46px;
  position: relative;
  h3{
    margin: 0px;
    margin-bottom: 7px;
    font-size: 25px;
  }
}

Ahora necesitamos hacer la animación en CSS3, entonces confiaremos en las siguientes propiedades:

.title-project{
  &:hover{
    height: 275px;
    z-index:999;
    position:relative;
    -webkit-animation:mymove 1s;
    animation:mymove 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
}
@-webkir-keyframes mymove{
  from{bottom: 0px;}
  to{
    bottom: 228px;
    padding-top:60px;
  }
}
@keyframes mymove{
  from{bottom: 0px;}
  to{
    bottom: 228px;
    padding-top:60px;
  }
}

El selector hover es usado para seleccionar elementos cuando pasamos el mouse sobre elementos, y aplique las propiedades solo en ese caso .title-project:hover será activado cuando vayamos con el mouse sobre un elemento con esa clase, entonces usar la propiedad de animación para generar animaciones. Necesitamos darle a esta propiedad el nombre de la animación que se creará y el tiempo que durará la animación.

LEER
MailHog: Vista previa de tus correos electrónicos de una manera fácil y rápida.

Es importnate usar estas propiedades: animation-fill-mode: forwards, las cuales obligarán a la animación a permanecer en su posición final, en este caso, la posición final es bottom: 228px. Otra propiedad importante es animation-iteration-count: 1, 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 ease-out como el valor, para que podamos ajustar la forma en que se mostrará la animación.

Por último, crearemos una animación mymove y la palabra clave @keyframes se encarga de crear la animación. Esta regla usa dos parámetros, from el que indica el origen de la animación, y to el que indica dónde irá, asignaremos el valor inferior en ambos casos.

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

Entonces, podemos ver que hacer una animación en CSS3 puede ser realmente fácil, pero debemos recordar que no todos los navegadores son compatibles con CSS3. Debido a esto, podemos correr el riesgo de implementar una animación que no se ve bien en un navegador específico cuando se usan propiedades que aún no son compatibles. Por lo tanto, para garantizar la compatibilidad total en todos los navegadores, puede ser mejor usar Javascript para hacer animaciones. De todos modos, ¡la decisión depende de usted!

Para ver el resultado:

Vea el Pen Animation with css3 por Bryan (@brayan15) en CodePen.


Comentarios