Background-Color Animation

<!DOCTYPE html> <html> <head> <link href="Style.css" rel="stylesheet" type="text/css"> <link href="" 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>
@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);} }
alert("Thank you for visiting my project")
Expand for more options Login