Animar elementos con CSS

En ocasiones el frontend de un sitio web necesita el diseño de una animación sutil de algun elemento html y pues para ello no es necesario usar javascript o al viejo jquery, es suficiente conocer algunas reglas CSS que nos permiten manipular las propiedades o valores css. 

Animar elementos html con css hacia arriba, abajo, izquierda, derecha

La siguiente hoja de estilos presenta 4 animaciones para aplicarlas a un elementos o tag html de forma simple y  sencilla.

Ahora veamos las reglas para animar elementos CSS:

• inDown
• inUp
• inLeft
• inRight

Con un tiempo de duración de medio segundo con el efecto bounce de ease-in-out.

.fadeinDown {
    animation: fadeInDown 500ms ease-in-out;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeinUp {
    animation: fadeInUp 500ms ease-in-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInLeft {
    animation: fadeInLeft 500ms ease-in-out;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}




.fadeInRight {
    animation: fadeInRight 500ms ease-in-out;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(-80px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Ejemplo práctico de animación con CSS por keyframes

Ahora aplicaremos ello en un ejemplo real completo...

.....

Conclusión final

Obviamente existen librerías que te permiten hacer lo mismo o mejor, pero vamos no puedes cargar mas de 100 kb frente a talvez 20kb. Eficiencia, solo les digo eficiencia en el desarrollo de su aplicación web.

Hasta un próximo tutorial de css!!.

(Post en desarrollo... vuelve pronto.)

Leido 4237 veces