Animaciones y transiciones

Las animaciones nos permiten cambiar los estilos de nuestros elementos durante un tiempo. Para esto debemos configurar nuestra animación con algunos estilos iniciales y finales para aplicarla a alguno de nuestros selectores de CSS:

@keyframe fadeIn {
        from {
                opacity: 0;
        }
        to {
                opacity: 1;
        }
}

.fadeIn {
        animation-name: fadeIn;
        animation-duration: 4s;
        animation-fill-mode: 4s;
}

No olvides repetir los atributos de animación o transiciones utilizando el prefijo -webkit-:

.fadeIn {
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn;
        animation-duration: 4s;
        -webkit-animation-duration: 4s;
        animation-fill-mode: 4s;
        -webkit-animation-fill-mode: 4s;
}

Recuerda que puedes aprender mucho más sobre este tema en el Curso de Animaciones para Web en Platzi.