Let's say i want to make the background go between black and blue. I am using the code
<head>
<style>
body {background:skyblue;}
</style>
</head>
<body>
code
</body>
</html>
and i want for it to change to {background:black;} every 2 seconds, then switch back to blue. How do I do that?
<head>
<style>
body {
animation: switch 2s linear 0s infinite alternate forwards;
}
@keyframes switch {
from {
background:skyblue;
}
49.9% {
background:skyblue;
}
50.1% {
background:black;
}
to {
background:black;
}
}
</style>
</head>
<body>
code
</body>
</html>Here is a way to do it, but it is considered bad practice to have extremely graphical effects like this since it might give people headaches and such if they have to look at screens like this for extended periods of time. Use animations sparingly.