Looking to create a CSS animation where part of a line (200px) changes color like a gradient. Any ideas on how to achieve this effect?
Below is the current code being used:
* {
margin: 0;
padding: 0 20px;
}
h1 {
text-align: center;
}
.lineHolder {
margin-top: 50px;
}
.line {
width: 100%;
height: 200px;
border: 1px solid black;
background: darkslateblue;
box-shadow: 200px 0px 200px -120px blueviolet inset;
animation: background 5s infinite alternate-reverse linear, background2 8s infinite alternate-reverse linear;
}
@keyframes background {
/* keyframes omitted for brevity */
}
<div class="holder">
<h1>Run color line</h1>
<div class="lineHolder">
<div class="line"></div>
</div>
</div>The animated line can be viewed in action on this website, near the footer area.