I created a unique design on codepen with a background animation, which functions properly there. However, when I integrate it into my ASP.Net Core project, the animation doesn't work as expected. The file references seem correct because the background color displays, but the animation does not. Initially, I suspected it was a browser issue in Chrome, but even Firefox does not render the animation. The only thing remaining untested is whether it works on 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: To troubleshoot, I isolated the code by creating a basic folder on the desktop and testing the HTML and CSS independently. No other dependencies like JS or Bootstrap were included. Unfortunately, I encountered the same issue. It seems to be related to how the files are processed. One possibility could be that Codepen uses .scss files for CSS, which may impact the animation. I will explore this further for a solution.