I do not know where you copied the code from, but it's very messy, with bad syntax. They already answered you correctly, but I will try to do it while I explain how to understand where your problem is, how to solve it by simplifying the code and at the end I leave the demo with your problem solved.
The first thing I recommend is to pay attention to how we are going to unravel this code:
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%}}
Sorting by line breaks
I hope you at least have a clear idea of the basics of css and that for every (;) that you see is a new sentence, that is, a line break for each semicolon will help to read it better when we do development:
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%}}
With respect to the lines that contain the word "keyframes" with the prefix @ means that they are sintaxis de animación in css, they are separated as the selectors, that is, for each square bracket {} there is a new selector . The CSS animation syntax is like this:
@keyframes NombreAnimacion {
Tiempo1 { propiedad: valor; propiedad: valor; ... }
Tiempo2 { propiedad: valor; propiedad: valor; ... }
}
In the code you point out, it's all together, so it looks like this:
@keyframes NombreAnimacion {Tiempo1 { propiedad: valor; propiedad: valor; ...} Tiempo2 { propiedad: valor; propiedad: valor; ... }}
Then, we would only have to identify, when there is a double bracket }} to separate an animation from another, as well as within each animation there is a time selector, it is better to separate them by line breaks to identify them better, leaving the code like this:
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%}
}
Simplifying the code (deleting prefixes)
Already with this you can identify, that there are properties with "prefixes" type @-webkit- and @-moz- , that is, they are repeated codes and that really today, they are not necessary in modern browsers (except in one or another property not yet implemented) and only complicate the syntax of the code. It is best to write your code without these and use prefix-free or auto-prefix so that they end up written only when they are needed, but automatically and not for you manually.
In short, how you can check the following links: you can stop using prefixes in animations or @keyframes and on the property: animation . So with that said, your code would be much shorter:
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%}
}
Now you can distinguish that the first 3 properties, can go within the same selector .overlay at the end or wherever you want, I'll sort it like this:
.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%}
}
Last corrections
And in this way we identify that you incorrectly use the same property 3 times, I mean: background-size and since css is a cascading language, by inheritance only the last line matters, the others are overwritten, so that we can erase them without fear.
Also that you use background, without specifying what type of background you are using, this only causes the properties to be overwritten, so you must change: background: #ff0000; for background-color: #ff0000; and background: linear-gradient(4deg, #ff0000, #0076ff); for background-image: linear-gradient(4deg, #ff0000, #0076ff); .
-
Syntax of backgrounds with gradients
I take this opportunity to explain that the funds with gradients have the following syntax:
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*/
...
);
The type of gradient can be linear, or radial and in terms of the angle in this case are 4 ° degrees but can also be by direction, something like: to right, to bottom, to top, to left or combinations diagonally as: to bottom right , to top left , etc. Learn more about this syntax here . The position of the color can be unspecified as in your case and will be ordered automatically according to the order, but you can specify by
Finally, in the time selector 0% you have poorly written background-position. We correct it and finally we have:
.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%; }
}
Done, already with this we have two selectors, the selector overlay and the animation selector @keyframes .
I do not know if you are clear, how CSS animations work, but with the above you can make an idea of what happens for each time selector. So I leave you a demo, with your code working.
Demo with corrections
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>