0

No logro hacer funcionar un gradient, este es el codigo de mi web:

.overlay {
  background: #ff0000;
  background-size: auto auto;
  background-size: cover;
  height: 480px;
  position: absolute;
  width: 100%;
  z-index: 2;
}

Codigo del gradient:

 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%}}

¿donde pego el codigo?

1
  • el código lo pones en el elemento que quieras que tenga ese efecto con el selector css correspondiente. Aún asi tienes varios errores de sintaxis
    – user7176
    Commented el 19 sept. 2018 a las 7:27

2 respuestas 2

1

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>

1

Este es tu código: He añadido algunos saltos de línea y algunas llaves ({}) y ahora funciona. espero que sea lo que necesitas.

body{margin:0;padding:0;}
.overlay {
width: 100%;
height: 480px;
background: #ff0000;
background-size: auto auto;
background-size: cover;
position: absolute;
z-index: 2;
overflow:hidden;

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%}
}
<div class="overlay"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.