<style>
ol, ul {
list-style: none;
padding: 0;
}

ul li a img {
border-radius: 20px;
}

#container {
margin: 0 auto;
padding: 1px;
}

#slideshow {
margin: 20px auto 20px;
position: relative;
height: 100px;
width: 100px;
overflow: visible;
}
#slideshow li.first-animation {
position: absolute;
top: 0;
-moz-animation: cycle 15s ease-in-out infinite;
-webkit-animation: cycle 15s ease-in-out infinite;
}
#slideshow li.second-animation {
position: absolute;
top: 0;
-moz-animation: cycletwo 15s ease-in-out infinite;
-webkit-animation: cycletwo 15s ease-in-out infinite;
}
#slideshow li.third-animation {
position: absolute;
top: 0;
-moz-animation: cyclethree 15s ease-in-out infinite;
-webkit-animation: cyclethree 15s ease-in-out infinite;
}
#slideshow :hover li {
animation-play-state: paused;
}

#mask {
overflow: hidden;
height: 100px;
}

@-webkit-keyframes cycle {
0% {
opacity: 1;
}
3.33% {
opacity: 1;
}
6.66% {
opacity: 1;
}
9.99% {
opacity: 1;
}
13.32% {
opacity: 1;
}
16.65% {
opacity: 1;
}
19.98% {
opacity: 1;
}
23.32% {
opacity: 1;
}
26.64% {
opacity: 1;
}
29.97% {
opacity: 1;
}
33.3% {
opacity: 1;
}
36.63% {
opacity: 0;
}
96.57% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes cycletwo {
0% {
opacity: 0;
}
/*1 second = 4%*/
33.3% {
opacity: 0;
}
36.63% {
opacity: 1;
}
39.96% {
opacity: 1;
}
43.29% {
opacity: 1;
}
46.62% {
opacity: 1;
}
49.95% {
opacity: 1;
}
53.28% {
opacity: 1;
}
56.61% {
opacity: 1;
}
59.94% {
opacity: 1;
}
63.27% {
opacity: 1;
}
66.6% {
opacity: 1;
}
69.93% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes cyclethree {
0% {
opacity: 0;
}
66.6% {
opacity: 0;
}
69.93% {
opacity: 1;
}
73.26% {
opacity: 1;
}
76.59% {
opacity: 1;
}
79.92% {
opacity: 1;
}
83.25% {
opacity: 1;
}
86.58% {
opacity: 1;
}
89.91% {
opacity: 1;
}
93.24% {
opacity: 1;
}
96.57% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes cycle {
0% {
opacity: 1;
}
3.33% {
opacity: 1;
}
6.66% {
opacity: 1;
}
9.99% {
opacity: 1;
}
13.32% {
opacity: 1;
}
16.65% {
opacity: 1;
}
19.98% {
opacity: 1;
}
23.32% {
opacity: 1;
}
26.64% {
opacity: 1;
}
29.97% {
opacity: 1;
}
33.3% {
opacity: 1;
}
36.63% {
opacity: 0;
}
96.57% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes cycletwo {
0% {
opacity: 0;
}
33.3% {
opacity: 0;
}
36.63% {
opacity: 1;
}
39.96% {
opacity: 1;
}
43.29% {
opacity: 1;
}
46.62% {
opacity: 1;
}
49.95% {
opacity: 1;
}
53.28% {
opacity: 1;
}
56.61% {
opacity: 1;
}
59.94% {
opacity: 1;
}
63.27% {
opacity: 1;
}
66.6% {
opacity: 1;
}
69.93% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes cyclethree {
0% {
opacity: 0;
}
/*1 second = 4%*/
66.6% {
opacity: 0;
}
69.93% {
opacity: 1;
}
73.26% {
opacity: 1;
}
76.59% {
opacity: 1;
}
79.92% {
opacity: 1;
}
83.25% {
opacity: 1;
}
86.58% {
opacity: 1;
}
89.91% {
opacity: 1;
}
93.24% {
opacity: 1;
}
96.57% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*@keyframes cycle {
0% { opacity: 1; }
3.33% { opacity: 1; }
6.66% { opacity: 1; }
9.99% { opacity: 1; }
13.32% { opacity: 1; }
16.65% { opacity: 0; }
19.98% { opacity: 0; }
23.32% { opacity: 0; }
26.64% { opacity: 0; }
29.97% { opacity: 0; }
33.3% { opacity: 0; }
36.63% { opacity: 0; }
39.96% { opacity: 0; }
43.29% { opacity: 0; }
46.62% { opacity: 0; }
49.95% { opacity: 0; }
53.28% { opacity: 0; }
56.61% { opacity: 0; }
59.94% { opacity: 0; }
63.27% { opacity: 0; }
66.6% { opacity: 0; }
69.93% { opacity: 0; }
73.26% { opacity: 0; }
76.59% { opacity: 0; }
79.92% { opacity: 0; }
83.25% { opacity: 0; }
86.58% { opacity: 0; }
89.91% { opacity: 0; }
93.24% { opacity: 0; }
96.57% { opacity: 0; }
100% { opacity: 1; }
}*/</style>

<table cellpadding="1" cellspacing="1" style="width: 63%;">
<tbody>
<tr>
<td>Vesels simts sīku siseņu salstot sausos salmos sisina.Čukča čigānam ķiplokus čamda.Žurka šņukst šņukstēdama.Zviegtin zviedza zviedru zirgi Zvirgzdupītes ziemeļos.Dižā mūža meža eži saož meža rožu ražu,
Daži eži ožot snauž, daži rožu ražu grauž... .</td>
<td>

<div id="container">
<div id="content-slideshow">
<div id="slideshow">
<div id="mask">
<ul>
<li id="first" class="first-animation">
<a href="http://bildites.lv"> <img src="http://bildites.lv/images/mzsdfdqc25o4m1wxuaz/9358/original.gif" alt="Smiekligi 1" height="110" width="110"> </a>
</li>

<li id="second" class="second-animation">
<a href="http://bildites.lv"> <img src="http://bildites.lv/images/7m5zptdp9k7dcbviao5j/9358/original.gif" alt="Smiekligi 2" height="110" width="110"> </a>
</li>

<li id="third" class="third-animation">
<a href="http://bildites.lv"> <img src="http://bildites.lv/images/dg04g5poid47o3xo6/9358/original.gif" alt="Smiekligi 3" height="110" width="110"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>