No se de donde has copiado el código, pero esta muy desordenado, con mala sintaxis. Ya te respondieron correctamente, pero yo voy a tratar de hacerlo mientras te explico cómo entender dónde está tu problema, cómo solucionarlo simplificando el código y al final te dejo la demo con tu problema resuelto.
Lo primero que te recomiendo es poner atención a cómo vamos a desenmarañar este código:
background: linear-gradient(4deg, #ff0000, #0076ff);background-size: 400% 400%;-webkit-animation: AnimationName 16s ease infinite;-moz-animation: AnimationName 16s ease infinite;animation: AnimationName 16s ease infinite;@-webkit-keyframes AnimationName {0%{background-position:52% 0%}50%{backgroundposition:49% 100%}
100%{background-position:52% 0%}}@-moz-keyframes AnimationName {
0%{background-position:52% 0%}
50%{background-position:49% 100%}
100%{background-position:52% 0%}}@keyframes AnimationName {0%{backgroundposition:52% 0%}50%{background-position:49% 100%}100{background-position:52% 0%}}
Ordenando por saltos de línea
Espero que al menos tengas claro lo básico de css y es que por cada (;)
que veas es una sentencia nueva, es decir, un salto de línea por cada punto y coma ayudará a leerlo mejor cuando hagamos desarrollo:
background: linear-gradient(4deg, #ff0000, #0076ff);
background-size: 400% 400%;
-webkit-animation: AnimationName 16s ease infinite;
-moz-animation: AnimationName 16s ease infinite;
animation: AnimationName 16s ease infinite;
@-webkit-keyframes AnimationName {0%{background-position:52% 0%}50%{backgroundposition:49% 100%}
100%{background-position:52% 0%}}@-moz-keyframes AnimationName {
0%{background-position:52% 0%}
50%{background-position:49% 100%}
100%{background-position:52% 0%}}@keyframes AnimationName {0%{backgroundposition:52% 0%}50%{background-position:49% 100%}100{background-position:52% 0%}}
Con respecto a los líneas que contienen la palabra "keyframes" con el prefijo @
significa que son sintaxis de animación
en css, estas se separan igual que los selectores, es decir por cada corchete {}
hay un nuevo selector. La sintaxis de animación CSS es así:
@keyframes NombreAnimacion {
Tiempo1 { propiedad: valor; propiedad: valor; ... }
Tiempo2 { propiedad: valor; propiedad: valor; ... }
}
En el código que señalas, está todo junto, por lo que se ve así:
@keyframes NombreAnimacion {Tiempo1 { propiedad: valor; propiedad: valor; ...} Tiempo2 { propiedad: valor; propiedad: valor; ... }}
Entonces, sólo tendríamos que identificar, cuando hay doble corchete }}
para separar una animación de otra, así como dentro de cada animación hay un selector de tiempo, estos es mejor separarlos por saltos de línea para identificarlos mejor, quedando el código así:
background: linear-gradient(4deg, #ff0000, #0076ff);
background-size: 400% 400%;
-webkit-animation: AnimationName 16s ease infinite;
-moz-animation: AnimationName 16s ease infinite;animation:
animation: AnimationName 16s ease infinite;
@-webkit-keyframes AnimationName {
0%{background-position:52% 0%}
50%{backgroundposition:49% 100%}
100%{background-position:52% 0%}
}
@-moz-keyframes AnimationName {
0%{background-position:52% 0%}
50%{background-position:49% 100%}
100%{background-position:52% 0%}
}
@keyframes AnimationName {
0%{backgroundposition:52% 0%}
50%{background-position:49% 100%}
100{background-position:52% 0%}
}
Simplificando el código (borrando prefijos)
Ya con esto puedes identificar, que hay propiedades con "prefijos" tipo @-webkit-
y @-moz-
, es decir, son códigos repetidos y que realmente hoy día, no son necesarios en navegadores modernos (salvo en una que otra propiedad aún no implementada) y solo te complican la sintaxis del código. Lo mejor es que escribas tu código sin estos y uses prefix-free
o auto-prefix
para que al final estos se escriban sólo cuando sean necesarios, pero de forma automática y no por ti de forma manual.
En resumidas cuentas, como puedes cerciorarte en los siguientes links: puedes dejar de usar prefijos en animaciones o @keyframes
y en la propiedad: animation. Así que con esto dicho, tú código quedaría mucho más corto:
background: linear-gradient(4deg, #ff0000, #0076ff);
background-size: 400% 400%;
animation: AnimationName 16s ease infinite;
@keyframes AnimationName {
0%{backgroundposition:52% 0%}
50%{background-position:49% 100%}
100{background-position:52% 0%}
}
Ahora ya puedes distinguir que los primeros 3 propiedades, pueden ir dentro del mismo selector .overlay
al final o donde quieras, yo lo voy a ordenar así:
.overlay {
/*Propiedad para Animación*/
animation: AnimationName 16s ease infinite;
/*Propiedades de fondo*/
background: #ff0000;
background-size: auto auto;
background-size: cover;
background: linear-gradient(4deg, #ff0000, #0076ff);
background-size: 400% 400%;
/*Resto de propiedades*/
height: 480px;
position: absolute;
width: 100%;
z-index: 2;
}
@keyframes AnimationName {
0%{backgroundposition:52% 0%}
50%{background-position:49% 100%}
100{background-position:52% 0%}
}
Últimas correcciones
Y de esta manera identificamos que usas de manera incorrecta la misma propiedad 3 veces, me refiero a: background-size
y como css es un lenguaje en cascada, por herencia solo importa la última línea, las otras se sobrescriben, por lo que podemos borrarlas sin miedo.
También que usas background, sin especificar que tipo de fondo estas usando, esto solo hace que se sobreescriban las propiedades, por lo que debes cambiar: background: #ff0000;
por background-color:
#ff0000;
y background: linear-gradient(4deg, #ff0000, #0076ff);
por background-image:
linear-gradient(4deg, #ff0000, #0076ff);
.
Sintaxis de fondos con gradientes
Aprovecho para explicarte que los fondos con gradientes, tienes la siguiente sintaxis:
background-image:
linear-gradient( /*tipo de gradiente*/
4deg, /*Ángulo del gradiente*/
0% ColorA, /*Donde empieza el color + Color que empieza*/
20% ColorB, /*Donde empieza el Color + color que sigue*/
50px ColorN, /*Pueden ser tantos quieras*/
...
);
El tipo de gradiente puede ser lineal, o radial y en cuanto al ángulo en este caso son 4° grados pero puede ser también por dirección, algo como: to right, to bottom, to top, to left
o combinaciones en diagonal como: to bottom right
, to top left
, etc. Conoce más sobre esta sintaxis aquí. La posición del color puede estar sin especificar como en tu caso y se ordenara automaticamente segun el orden, pero puedes especificar por
Por último, en el selector de tiempo 0%
tienes mal escrito background-position.
Lo corregimos y tenemos finalmente:
.overlay {
animation: AnimationName 16s ease infinite;
background: #ff0000;
background: linear-gradient(4deg, #ff0000, #0076ff);
background-size: 400% 400%;
height: 480px;
position: absolute;
width: 100%;
z-index: 2;
}
@keyframes AnimationName {
0%{ background-position: 52% 0%; }
50%{ background-position: 49% 100%; }
100{ background-position: 52% 0%; }
}
Listo, ya con esto tenemos dos selectores, el selector overlay
y el selector de animación @keyframes
.
No se si tengas claro, cómo funcionan las animaciones CSS, pero con lo anterior te puedes hacer idea de que sucede por cada selector de tiempo. Por lo que te dejo una demo, con tu código funcionando.
Demo con las correcciones
body{
min-height: 100vh;
margin: 0;
}
.overlay {
animation: AnimationName 16s ease infinite;
background-color: #ff0000;
background-image:
linear-gradient(
4deg,
#ff0000,
#0076ff
);
background-size: 400% 400%;
height: 480px;
position: absolute;
width: 100%;
z-index: 2;
}
@keyframes AnimationName {
0%{ background-position:52% 0%; }
50%{ background-position:49% 100%; }
100{ background-position:52% 0%; }
}
<div class="overlay">
</div>