CSS3 animation multiple background images

From David Walsh, http://davidwalsh.name/multiple-background-css-animations

HTML

<div class="animate-area animate-area2"></div>

CSS

@keyframes animatedBird {
		    from {
		        background-position: 20px 10px, 30px 80px, 0 0;
		    }
		    to {
		        background-position: 300px 0px, 30px 20px, 100% 0;
		    }
		}
		@-webkit-keyframes animatedBird {
		    from {
		        background-position: 100px 20px, 30px 80px, 0 0;
		    }
		    to {
		        background-position: 500px -200px, 30px 20px, 100% 0;
		    }
		}
		@-ms-keyframes animatedBird {
		    from {
		        background-position: 20px 20px, 30px 80px, 0 0;
		    }
		    to {
		        background-position: 300px -90px, 30px 20px, 100% 0;
		    }
		}
		@-moz-keyframes animatedBird {
		    from {
		        background-position: 20px -90px, 30px 80px, 0 0;
		    }
		    to {
		        background-position: 300px -90px, 30px 20px, 100% 0;
		    }
		}
		.animate-area2 {
		    width: 560px;
		    height: 190px;
		    background-image: url(''), url(''), url(http://davidwalsh.name/demo/bg-clouds.png);
		    background-position: 20px -90px, 30px 80px, 0px 0px;
		    background-repeat: no-repeat, no-repeat, repeat-x;
		    animation: animatedBird 4s linear infinite;
		    -ms-animation: animatedBird 4s linear infinite;
		    -moz-animation: animatedBird 4s linear infinite;
		    -webkit-animation: animatedBird 4s linear infinite;
		    overflow: hidden;
		}