Raketa,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div {
width:100px;
height:100px;
border: 2px solid rgba(0, 0, 205, 1);
border-radius: 8px;
}
div.active{
-webkit-animation: color 5s ease-in-out infinite;
-moz-animation: color 5s ease-in-out infinite;
-o-animation: color 5s ease-in-out infinite;
animation: color 5s ease-in-out infinite;
}
@keyframes color {
0% {
background-color: #FF0000;
}
17%{
background-color: #FFA500;
}
34%{
background-color: #FFFF00;
}
51%{
background-color: #008000;
}
68% {
background-color: #0000FF;
}
85%{
background-color: #000080;
}
100%{
background-color: #800080;
}
}
@-webkit-keyframes color {
0% {
background-color: #FF0000;
}
17%{
background-color: #FFA500;
}
34%{
background-color: #FFFF00;
}
51%{
background-color: #008000;
}
68% {
background-color: #0000FF;
}
85%{
background-color: #000080;
}
100%{
background-color: #800080;
}
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script>
$(function () {
var div = $('div');
div.click(function(){
div.toggleClass('active')
});
});
</script>
</head>
<body>
<div>click me</div>
</body>
</html>