I've made a certain design in codepen with a background animation, and it works there, but it doesn't work when I put it in my ASP.Net Core project. I know I'm referencing the file correctly because the background color does show, it just doesn't animate. I thought it was just an issue with Chrome, but it doesn't work in Firefox either. The only thing I haven't tested was to see if it worked in regular IIS instead of IIS Express.

Code:

CSS:

body{ margin:0; padding:0; background:0 0; } .parallaxBackground { min-height:100%; min-width:100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .colorcycle { min-height: 100%; min-width: 100%; display: inline-block; text-align: center; background: linear-gradient(271deg, #e7ff26, #2ecc00, #ff3b00, #2a9fff); background-size: 800% 800%; -webkit-animation: AnimationName 10s ease infinite; -moz-animation: AnimationName 10s ease infinite; -o-animation: AnimationName 10s ease infinite; animation: AnimationName 10s ease infinite; -webkit-keyframes AnimationName { 0% { background-position: 92% 0% } 50% { background-position: 9% 100% } 100% { background-position: 92% 0% } } @-moz-keyframes AnimationName { 0% { background-position: 92% 0% } 50% { background-position: 9% 100% } 100% { background-position: 92% 0% } } @-o-keyframes AnimationName { 0% { background-position: 92% 0% } 50% { background-position: 9% 100% } 100% { background-position: 92% 0% } } @keyframes AnimationName { 0% { background-position: 92% 0% } 50% { background-position: 9% 100% } 100% { background-position: 92% 0% } } }

HTML:

<body> <!--Parallax Landing Section--> <div class="parallaxBackground"> <div class="colorcycle">testing testing testing </div> </div> <!--Parallax Landing Section--> </body>

Edit: So, I tested it out separate from everything. I just made a plain folder on the desktop and put my HTML and CSS in their respective files and tried it like that. No other references to any JS,Bootstrap or anything else. Got the same issue. So I don't think it's something in my project blocking it, it has to be the way it's being processed. The only thing I can think of is that on Codepen, they CSS is in a .scss file, but I didn't think that would make a difference. I'll test that out but other than that, I have no idea. I'll just need to find an alternative.