I am trying to animate a CSS background for my website. However, when I run the program and view my site, the gradient seems to standstill, it does not move. Is this a problem with the CSS animation, or is the speed simply too slow? Here is what happens...
/* Declare some variables for CSS */
:root {
/* Website fonts */
/* Titles */ --poppins: "Poppins", sans-serif;
/* Normal text */ --source-sans-pro: "Source Sans Pro", sans-serif;
/* Colors */
/* A nice, warm(ish) yellow | Turbo Yellow */
--yellow: 255, 225, 0;
/* A deep, near-black grey | Cod Grey */
--grey: 23, 23, 23;
/* A dark, sharp violet | Electric Violet */
--violet: 170, 0, 200;
/* A deep, pinkish red | Monza Red */
--red: 189, 0, 57;
}
/* Basic text setup */
.text {
/* Don't have the text all the way to the left */
margin: 40px;
/* Set a good font */
font-family: var(--source-sans-pro);
}
/* Opening divider */
.opener {
/* Align it properly */
height: 100%;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
/* Gradient background, slightly darkened */
background: linear-gradient(55deg, rgba(var(--red), 0.9), rgba(var(--violet), 0.9));
/* Make sue to cover the whole page */
background-size: cover;
/* Set a background color */
background-color: var(--grey);
/* Make text in this divider white -- contrasts nicely with background */
color: white;
/* Animate the gradient! */
-webkit-animation: background 2s ease infinite;
-moz-animation: background 2s ease infinite;
-o-animation: background 2s ease infinite;
animation: background 2s ease infinite;
}
/* Gradient animation, Webkit */
@-webkit-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Mozilla */
@-moz-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation, Opera */
@-o-keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Gradient animation */
@keyframes background {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Headings & titles */
.heading {
/* Align heading to center */
text-align: center;
/* Set a good font */
font-family: var(--poppins);
/* Make it BIG! */
font-size: 550%;
/* Make sure it's not too light */
opacity: 100%;
}<!DOCTYPE html> <html leng = "en">
<!-- If you're seeing this, hello! Here, you can see the inner workings of my website. -->
<head>
<title> Website! </title>
<!-- All imports here -->
<!-- Cool fonts from Google Fonts -->
<link rel = "preconnect"
href = "https://fonts.gstatic.com">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;1,500&family=Source+Sans+Pro:ital,wght@0,600;1,600&display=swap">
<!-- CSS Stylesheet -->
<link rel = "stylesheet"
type = "text/css"
href = "styles.css"
media = "screen"/>
<!-- Encoding -->
<meta charset = "utf-8">
</head>
<body>
<div class = "opener">
<h1 class = "heading"> Site Title </h1>
<text class = "text"> Some text goes here... </text>
</div>
</body>Also, is there any way to keep the divider that contains the animation to only cover a certain amount? I want to show the animation only for the first "x" height, where x is the user's window height, along with the full window width. This would be similar to npm's website, where the red/purple header is a specific size and goes away when scrolling. Does anyone know how to do this? if you could help, that would be greatly appreciated!
