Html
    Css
    Js

    
                        
body{
	margin: 0;
	padding: 0;
}

/* 
colorswitch(animation-name):选择器的 keyframe 名称;
20s(animation-duration):颜色变换的周期时间;
(animation-timing-function):动画的速度曲线;
(animation-delay):动画开始之前的延迟;
infinite(animation-iteration-count):播放动画的次数,可以是数值,也可以是infinite(无限次);
(animation-direction):是否应该轮流反向播放动画;
 */
.animat {
	height: 1000px;
	position: relative;
	animation: colorswitch 20s infinite;
	/* Firefox */
	-moz-animation: colorswitch 20s infinite;
	/* Safari and Chrome */
	-webkit-animation: colorswitch 20s infinite;
	/* Opera */
	-o-animation: colorswitch 20s infinite;
}

@keyframes colorswitch {
	0% {
		background: #0087C9
	}

	16% {
		background: #EF4A53
	}

	32% {
		background: #FFB463
	}

	49% {
		background: #33D5D4
	}

	65% {
		background: #254356
	}

	81% {
		background: #5B4097
	}

	100% {
		background: #0087C9
	}
}

/* Firefox */
@-moz-keyframes colorswitch {
	0% {
		background: #0087C9
	}

	16% {
		background: #EF4A53
	}

	32% {
		background: #FFB463
	}

	49% {
		background: #33D5D4
	}

	65% {
		background: #254356
	}

	81% {
		background: #5B4097
	}

	100% {
		background: #0087C9
	}
}

/* Safari and Chrome */
@-webkit-keyframes colorswitch {
	0% {
		background: #0087C9
	}

	16% {
		background: #EF4A53
	}

	32% {
		background: #FFB463
	}

	49% {
		background: #33D5D4
	}

	65% {
		background: #254356
	}

	81% {
		background: #5B4097
	}

	100% {
		background: #0087C9
	}
}

/* Opera */
@-o-keyframes colorswitch {
	0% {
		background: #0087C9
	}

	16% {
		background: #EF4A53
	}

	32% {
		background: #FFB463
	}

	49% {
		background: #33D5D4
	}

	65% {
		background: #254356
	}

	81% {
		background: #5B4097
	}

	100% {
		background: #0087C9
	}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

颜色渐变动画效果(原创)

/* 
colorswitch(animation-name):选择器的 keyframe 名称;
	20s(animation-duration):颜色变换的周期时间;
	(animation-timing-function):动画的速度曲线;
	(animation-delay):动画开始之前的延迟;
	infinite(animation-iteration-count):播放动画的次数,可以是数值,也可以是infinite(无限次);
	(animation-direction):是否应该轮流反向播放动画;
	*/
.animat {
	height:1000 px;
	position:relative;
	animation:colorswitch 20 s infinite;
	/* Firefox */
    -
    moz - animation:colorswitch 20 s infinite;
	/* Safari and Chrome */
    -
    webkit - animation:colorswitch 20 s infinite;
	/* Opera */
    -
    o - animation:colorswitch 20 s infinite;
}
@keyframes colorswitch {
	/*参照示例代码*/
}
0