Animated Banner

The code snippets below were created by twsparklecat

Finished Code

Change #00ffec, #ff6600, #ff6600, #00ffec with the gradient hex colors of your choice. Remove font-weight:700; if you want to keep the text slim like they were. Change the 15s to lower or higher times in animation: gradient 15s ease infinite; to make it faster/slower. Code below.

<style>
.announcement-bar {
font-weight:700;
background: linear-gradient(-60deg, #00ffec, #ff6600, #ff6600, #00ffec);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>