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 .
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>
A diferencia del ejemplo anterior, no necesitaremos Javascript, pero vamos a escribir algunas líneas CSS, aquí está el código tras definir las propiedades iniciales de nuestra clase con casi los mismos estilos que utilizamos en la publicación anterior, solo que sin utilizar la clase de inicio :
.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; } }
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; } }
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 .
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.
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 .
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 .