Webkit Color Transition Loop


/ Published in: CSS
Save to your folder(s)

Color-transition loop from the massiveblue homepage


Copy this code and paste it in your HTML
  1. body, #logo h1 a, ul#menu li.on {background-color: #39f !important;}
  2. @-webkit-keyframes colours {
  3. 0% {background-color: #39f;}
  4. 15% {background-color: #8bc5d1;}
  5. 30% {background-color: #f8cb4a;}
  6. 45% {background-color: #95b850;}
  7. 60% {background-color: #944893;}
  8. 75% {background-color: #c71f00;}
  9. 90% {background-color: #bdb280;}
  10. 100% {background-color: #39f;}
  11. }
  12. body, #logo h1 a, ul#menu li.on {
  13. -webkit-animation-direction: normal;
  14. -webkit-animation-duration: 60s;
  15. -webkit-animation-iteration-count: infinite;
  16. -webkit-animation-name: colours;
  17. -webkit-animation-timing-function: ease;
  18. }

URL: http://www.massiveblue.com/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.