CSS3 Code to animate background images

Example of same banner concept from FIFA Home page, using CSS3 only, no JavaScript.

The CSS Code

#teamphoto3 {
width: 600px;
background: url(../../images/netherlands.jpg) no-repeat center;
background-position: 6px 2px;
position: relative;
margin-left: 25px;
margin-top: 25px;
display: block;
animation-name: teamphotoAnim;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-delay: 5s;
animation-timing-function: linear;
}

@keyframes teamphotoAnim {
0% {background: url(../../images/neth2.jpg) no-repeat center; background-size: 600px 160px;}
10% {background: url(../../images/neth2.jpg) no-repeat center; background-size: 1200px 320px;}

20% {background: url(../../images/neth3.jpg) no-repeat center; background-size: 600px 160px;}
30% {background: url(../../images/neth3.jpg) no-repeat center; background-size: 1200px 320px;}

40% {background: url(../../images/neth4.jpg) no-repeat center; background-size: 600px 160px;}
50% {background: url(../../images/neth4.jpg) no-repeat center; background-size: 600px 160px;}

60% {background: url(../../images/netherlands.jpg) no-repeat center; }
70% {background: url(../../images/netherlands.jpg) no-repeat center; }

80% {background: url(../../images/neth3.jpg) no-repeat center; background-size: 600px 160px;}
100% {background: url(../../images/neth3.jpg) no-repeat center;background-size: 1200px 320px;}
}

#banner3 {
height: 160px;
background: url(../../images/FIFA-banner.png) center no-repeat;
background-size: 600px 160px;
position: relative;
}

The Basic Document Structure

<!DOCTYPE html>
<html>
<head>
<title>Banner Page Test</title>
<link href="assets/styles/styles.css" rel="stylesheet" type="text/css" />

</head>
<body>
<header>
<div id="teamphoto3">
<div id="banner3"></div>
</div>
</header>
</body>
</html>