Background-Color Animation
HTML
<!DOCTYPE html>
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<title>Colors</title>
</head>
<body class="BG">
<h1 class="Header">Background-Color Animation</h1>
<br><br><br><br><br>
<div class="Test-Box">
@keyframes animation {<br><br>
0%{background-color: lightgreen;}<br>
20%{background-color: yellow;}<br>
40%{background-color: lightcoral;}<br>
60%{background-color: lightblue;}<br>
80%{background-color: deepskyblue;}<br>
100%{background-color: lightgreen;}<br>
}<br><br>
body {<br>
animation: animation ease infinite 20s;<br>
}
</div>
<br>
</body>
</html>
CSS
@keyframes BG {
0%{background-color: lightgreen;}
20%{background-color: #FFE824;}
40%{background-color: lightcoral;}
60%{background-color: lightblue;}
80%{background-color: deepskyblue;}
100%{background-color: lightgreen;}
}
.BG {
animation: BG ease infinite 20s;
}
.Header {
color: white;
font-family: 'Teko', sans-serif;
font-weight: 900;
font-size: 80px;
font-style: italic;
text-align: center;
line-height: 500px;
text-shadow: 2px 2px 2px black;
cursor: default;
animation: HeaderAnimation 0.5s ease;
}
div {
color: gray;
font-family: 'Teko', sans-serif;
font-size: 30px;
text-align: left;
background-color: white;
width: 50%; height: 600px;
display: block; margin: auto;
padding: 50px;
cursor: default;
animation: DivAnimation 0.5s ease;
}
@keyframes HeaderAnimation {
from {transform: translateY(1000px);}
to {transform: translateY(0px);}
}
@keyframes DivAnimation {
from {transform: translateY(-1000px);}
to {transform: translateY(0px);}
}
JAVASCRIPT
alert("Thank you for visiting my project")
3 Responses