CSS Background Color Animation Effect With Coding Example | HTML CSS Tutorial For Beginners Friendly
Learn how to make a website's background color animation using only HTML & CSS. If you want to create a website with the background color moving animation or you have just learned the basics of HTML & CSS and now you're trying to learn more about CSS animation, then this one is for you!Step 1: First of all you need to create a folder on your computer then create a file called index.html where you are going to code your HTML.
Open your index.html file on your Visual Studio Code Copy the HTML code and paste it to your editor and save it by using the keyboard shortcut CTRL+S.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Background Color Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg-area"></div>
<div class="bg-area layer2"></div>
<div class="bg-area layer3"></div>
<div class="text-area">
<h1>WD TuTs Online</h1>
<h2>Professional Front-end Developer</h2>
</div>
</body>
</html>
Step 2: Now go to your folder again and create a new file called style.css where you are going to code your CSS (Cascading Style Sheet) code.
body{
margin: 0;
background: #9e48e9;
}
.bg-area{
position: fixed;
left: -50%;
right: -50%;
top: 0;
bottom: 0;
animation: color-animation 5s ease-in-out infinite alternate;
background: linear-gradient(90deg, #f36cd1 50%, #3bc2b0 -50%);
opacity: .5;
z-index: -1;
}
.layer1{
animation-direction: alternate-reverse;
animation-duration: 4s;
}
.layer2{
animation-duration: 7s;
}
.text-area{
position: fixed;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
line-height: 80px;
}
.text-area h1{
font-family: Arial, 'Black';
font-weight: bolder;
font-style: italic;
font-size: 60px;
letter-spacing: 5px;
color: #fff;
margin: 0;
background: black;
}
.text-area h2{
font-family: Ranga;
font-weight: bold;
font-style: italic;
font-size: 40px;
letter-spacing: 2px;
color: #fff;
margin: 0;
background: rgb(243, 7, 7);
}
@keyframes color-animation {
0%{
transform: translateX(-50%);
}
100%{
transform: translateX(50%);
}
}
After that open it on your Visual Studio Code Copy the CSS code and paste it to your editor then save it by using the keyboard shortcut CTRL+S.
Step 3: Now you are ready to test the code. Go to your folder again and open your index.html file with Google Chrome Browser.
If you get any error in your code and you are just stuck on it then please go to our Facebook Group and create a post with screenshot and problem details.
Happy Learning!
0 Comments