CSS: Płynna zmiana kolorów tła

Automatyczna zmiana koloru tła strony internetowej.

Źródło: http://cssdeck.com/labs/immanvel

HTML

<div class="color-background"> <div class="color-me"> <p> Play with colors </p> By Imman Vel </div> </div>

CSS

/*---------------------------------- * * Animation Background color * * Date: 22/12/2013 * Author: Imman vel * Fb User Name: Imman00vel * licence: Free * * Compatible Browsers: IE9+, Firefox 5+, Safari 5+, Opera 12+, Chrome *----------------------------------*/ .color-background { position: absolute; top: 0; left: 0; margin: 0 auto; padding: 0; height: 100%; width: 100%; animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ } @keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-webkit-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-moz-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-o-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } .color-me { position: relative; top: 35%; background-color: #fff; padding: 20px; font-size: 50px; text-align: center; letter-spacing: 3px; } .color-background .color-me p { padding: 0; margin: 0 0 -15px 0; color: #777; letter-spacing: 5px; font-size: 20px; text-transform: uppercase; }