CSS Animated Gradient WordPress Header Issue

So I am trying to implement a Pure CSS gradient into a website I am developing which is http://stirlandbuilding.co.uk

I have added the below code into the CSS for the site which creates the gradient but I am not getting any animation what so ever for some reason. I have done this before and got it working on other sites but for this one I can not get it working.

The code I am using is from here – https://codepen.io/P1N2O/pen/pyBNzX

background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

Any help will be appreciated 🙂 Really just want to try and get the animation working. Sorry if site is slow, its in early development.

Read more here:: CSS Animated Gradient WordPress Header Issue

Leave a Reply

Your email address will not be published. Required fields are marked *