regla @keyframes

<< Animaciones Imágenes y objetos >>

Dentro del apartado de animation-* debemos tener en cuenta la regla @keyframe que nos permitirá definir los fotogramas de la animación.

Como sabemos, una animación no es más que una secuencia de imágenes que mostradas una detrás de otra generan el efecto de movimiento. En CSS los fotogramas los generamos a partir de propiedades CSS, consiguiendo que no sea necesario definir tantos fotogramas sino que crearemos los justos para que el navegador haga el resto.

La sintaxis que se emplea en la regla @keyframe para definir los fotogramas es:

@keyframes nombre {
    from {
        propiedad: valor;
    }
    to {
        propiedad: valor;
    }
}

Donde el nombre será el nombre que utilicemos para identificar a los fotogramas de una animación, es recomendable utilizar la nomenclatura kebab-case. Dentro del from(0%) pondremos todos los estilos a aplicar antes de comenzar la animación, y dentro del to(100%) irá los estilos finales. La palabra reservada from y to puede ser reemplazada por el %, es decir, el valor que ocupa ese estilo dentro de la animación, al igual que podemos insertar nuevos porcentajes como señal de fotogramas intermedios.

Veamos un ejemplo sencillo donde el nombre de la animación será importante, y pasa de un fotograma donde el color (del texto en este caso) es de color rojo, y acaba siendo negro.

@keyframes importante {
    from { 
        color: red; text-transform: uppercase;  
    } /* Primer fotograma */
    to { 
        color: black; text-transform: none; 
    } /* Segundo y último fotograma */
}

Recuerda que una vez que hemos definido el @keyframes, hay que asociarlo al elemento html al que se lo queremos aplicar.

.txt-imp{ 
    animation: importante 2s ease 0s infinite;
}

Como bien dijimos en el bloque de animación, es muy importante no pasarnos con la duración de una animación, es importante usar valores bajos como 0.25s, 0.5s o 1s.

@keyframes importante {
    0% { 
        color: red; text-transform: uppercase;  
    } /* Primer fotograma */
    50% {
        text-transform: uppercase;
    } /* Segundo fotograma */
    100% { 
        color: black; text-transform: none; 
    } /* Último fotograma */
}

Si tenemos fotogramas que van a utilizar los mismos estilos que uno anterior, siempre podemos separarlos por comas y así poder aprovechar ese código.

<< Animaciones Imágenes y objetos >>