Working off a CSS3 animated background tutorial - css

Question

I'm working off of a really great CSS3 animated background tutorial that can be found here
The only problem is that it won't work. Unfortunately, the tutorial is just a blog post with code, and there's no specific name for it, so I've been having trouble finding support for my issue.
It uses simple html markup:
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 07</span>
<div>
<h3></h3>
</div>
</li>
<li>
<span>Image 08></span>
<div>
<h3></h3>
</div>
</li>
And then the rest is done in CSS3
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url() repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 40s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 40s linear infinite 0s;
-moz-animation: titleAnimation 40s linear infinite 0s;
-o-animation: titleAnimation 40s linear infinite 0s;
-ms-animation: titleAnimation 40s linear infinite 0s;
animation: titleAnimation 40s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/homepage/img01.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/homepage/img02.jpg);
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/homepage/img03.jpg);
animation-delay: 10s;
-webkit-animation-delay: 10s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/homepage/img04.jpg);
animation-delay: 15s;
-webkit-animation-delay: 15s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/homepage/img05.jpg);
animation-delay: 20s;
-webkit-animation-delay: 20s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/homepage/img06.jpg);
animation-delay: 25s;
-webkit-animation-delay: 25s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/homepage/img07.jpg);
animation-delay: 30s;
-webkit-animation-delay: 30s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/homepage/img08.jpg);
animation-delay: 35s;
-webkit-animation-delay: 35s;
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
There's even a backup in case the browser doesn't support CSS3 animations:
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
This is supposed to ensure that you don't end up with a blank page, which is what I have. I've re-checked my links, and almost entirely copied the demo, but it's not displaying on my page. Is anyone familiar with CSS3 and have any ideas as to what my issue could be?

Answer 1

Maybe the problem can be fixed with adding webkit and such to
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } so: #-webkit-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } #-moz-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 } #-o-keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }