Posted By

jackomono on 05/03/10


Tagged

css CSS3 transition webkit


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

Nanobyte
jackomono
kimil


Webkit Color Transition Loop


 / Published in: CSS
 

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

Color-transition loop from the massiveblue homepage

  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. }

Report this snippet  

You need to login to post a comment.