Teoría
Teoría

Animar filtros CSS

Los filtros CSS también pueden usarse con animaciones y transiciones.

Por ejemplo, se consigue un efecto muy original al aplicar una animación infinita al filtro de rotación del tono hue-rotate en una fotografía a color.

La animación rotate-colors ya está preparada en el código. Dentro de @keyframes, el bloque 100% define el estado final de cada ciclo. La declaración animation del ejemplo fija una duración de 2s y la repetición continua.

¡Vamos a probarlo!

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Animar filtros CSS</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="compare"> <div class="compare-single hue-animate"> <img src="img/spb-7-full.jpg" alt=""> </div> </div> </body> </html>

CSS

@keyframes rotate-colors { 100% { } } .hue-animate img { animation: rotate-colors 2s linear infinite; }

ObjetivosRealizado

En el fotograma clave 100% de la animación rotate-colors, agrega el filtro de rotación del tono con el valor 360deg.