.employee { margin: 4px; padding: 6px; border: 1px solid #999; border-radius: 6px; background-color: #eee; } .employee:hover { cursor:pointer; -webkit-animation:rainbow 1s infinite; -ms-animation:rainbow 1s infinite; -o-animation:rainbow 1s infinite; animation:rainbow 1s infinite; } @-webkit-keyframes rainbow { 0% {background-color: #ff0000;} 10% {background-color: #ff8000;} 20% {background-color: #ffff00;} 30% {background-color: #80ff00;} 40% {background-color: #00ff00;} 50% {background-color: #00ff80;} 60% {background-color: #00ffff;} 70% {background-color: #0080ff;} 80% {background-color: #0000ff;} 90% {background-color: #8000ff;} 100% {background-color: #ff0080;} } @-ms-keyframes rainbow { 0% {background-color: #ff0000;} 10% {background-color: #ff8000;} 20% {background-color: #ffff00;} 30% {background-color: #80ff00;} 40% {background-color: #00ff00;} 50% {background-color: #00ff80;} 60% {background-color: #00ffff;} 70% {background-color: #0080ff;} 80% {background-color: #0000ff;} 90% {background-color: #8000ff;} 100% {background-color: #ff0080;} } @-o-keyframes rainbow { 0% {background-color: #ff0000;} 10% {background-color: #ff8000;} 20% {background-color: #ffff00;} 30% {background-color: #80ff00;} 40% {background-color: #00ff00;} 50% {background-color: #00ff80;} 60% {background-color: #00ffff;} 70% {background-color: #0080ff;} 80% {background-color: #0000ff;} 90% {background-color: #8000ff;} 100% {background-color: #ff0080;} } @keyframes rainbow { 0% {background-color: #ff0000;} 10% {background-color: #ff8000;} 20% {background-color: #ffff00;} 30% {background-color: #80ff00;} 40% {background-color: #00ff00;} 50% {background-color: #00ff80;} 60% {background-color: #00ffff;} 70% {background-color: #0080ff;} 80% {background-color: #0000ff;} 90% {background-color: #8000ff;} 100% {background-color: #ff0080;} }