Skip to content

Instantly share code, notes, and snippets.

@charliepark

charliepark/rainbow-border.css

Created August 21, 2012 00:21
Show Gist options
  • Save charliepark/3409697 to your computer and use it in GitHub Desktop.
Save charliepark/3409697 to your computer and use it in GitHub Desktop.
Download ZIP
CSS animations to give a div a rainbow border, perpetually changing color
Raw
rainbow-border.css
@-webkit-keyframes rainbow {
0% {border-color: hsl(0, 100%, 50%);}
100% {border-color: hsl(255, 100%, 50%);}
}
.rainbow_border{
border: 4px solid hsl(0, 100%, 50%);
-webkit-animation: rainbow 5s infinite alternate;
}
@ChildishGiant
Copy link

It only seems to be cycling through red and blue.

@Michaelgathara
Copy link

I gave it more colors based on a seven-color rainbow. This makes it seem more so like a rainbow
Found: Here

@-webkit-keyframes rainbow {
  0% {border-color: hsl(0, 100%, 50%);}
  14% {border-color: hsl(30,100%,50%);}
  28% {border-color: hsl(60,100%,50%);}
  42% {border-color: hsl(120,100%,50%);}
  56% {border-color:  hsl(240,100%,50%);}
  70% {border-color: hsl(280,100%,50%);}
  84% {border-color: hsl(320,100%,50%);}
  100% {border-color: hsl(255, 100%, 50%);}
}

then increased the time

border: 2px solid hsl(0, 100%, 50%);
-webkit-animation: rainbow 10s infinite alternate;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment