Skip to content

Instantly share code, notes, and snippets.

@astro

astro/fade.html

Created July 23, 2014 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save astro/fd80e15f4345eb76f0fe to your computer and use it in GitHub Desktop.
Save astro/fd80e15f4345eb76f0fe to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fade.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-webkit-keyframes fader {
/*from {
background-color: rgb(255, 0, 0);
}
25% {
background-color: rgb(255, 255, 0);;
}
50% {
background-color: rgb(0, 255, 0);;
}
75% {
background-color: rgb(0, 0, 255);;
}
to {
background-color: rgb(255, 0, 0);
}*/
from {
background-color: hsl(0, 100%, 60%);
}
12% {
background-color: hsl(45, 100%, 60%);;
}
25% {
background-color: hsl(90, 100%, 60%);;
}
37% {
background-color: hsl(135, 100%, 60%);;
}
50% {
background-color: hsl(180, 100%, 60%);;
}
63% {
background-color: hsl(225, 100%, 60%);;
}
75% {
background-color: hsl(270, 100%, 60%);;
}
88% {
background-color: hsl(315, 100%, 60%);;
}
to {
background-color: hsl(360, 100%, 60%);;
}
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
background-color: hsl(0, 100%, 50%);
animation-duration: 10s;
animation-name: fader;
animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-name: fader;
-moz-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-name: fader;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
</style>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment