Guide me with this css animation code technique - html

Question

Can you tell me what is done by position: numbers % in css animation.
How these numbers are working?
body{
font-family:'Merriweather Sans';
background:white;
}
#test{
background:linear-gradient(270deg, #36bf9c, #368ebf, #df5a5f, #eea965);
color:white;
background-size:600% 600%;
padding:20px 450px;
position:static;
font-size:40px;
font-family:"Merriweather Sans";
animation:gradient 60s ease infinite;
}
#keyframes gradient{
0%{
background-position: 0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}

Answer 1

0% means the CSS will be applied at the start
50% means when half of the specified time will pass ( here 30s)
100% means when the full time passes.
And the animations can't happen instantly so it will go with a lot of transition states but at these times the CSS will be the specified one.

Answer 2

The background-size is 600%, which means 6 times the size of visual area (#test div)it is displayed in. The background is set up as a gradient. By moving this background left to right and back, it makes the colors change in an animated fashion.
I have added an extra div in the example to show the gradient.
body{
font-family:'Merriweather Sans';
background:white;
}
#test{
background:linear-gradient(270deg, #36bf9c, #368ebf, #df5a5f, #eea965);
color:white;
background-size:600% 600%;
padding:20px 450px;
position:static;
font-size:40px;
font-family:"Merriweather Sans";
animation:gradient 60s ease infinite;
}
#backgroundImage {
background:linear-gradient(270deg, #36bf9c, #368ebf, #df5a5f, #eea965);
width:200px;
height:100px;
background-size:100% 100%;
}
#keyframes gradient{
0%{
background-position: 0% 50%;
}
50%{
background-position:100% 50%;
}
100%{
background-position:0% 50%;
}
<div id="test"></div>
<br>
<div id="backgroundImage"></div>