How to make transition of Headings in Landing Page - html

Question

My HomePage has under navigation bar a 1024x500px slideshow going on.
I want headings over that slideshow.
The headings should contain some sentences, for example "Digital art".
I would like to make transitions for those headings and text.
They should change every few seconds, fly in and out, or fade in and out, not sure.
How can I make that?
Thank you all.
Here is a screenshot if the situation. http://pokit.org/get/?9e3304f02be8142576ed1a0fa568efc1.jpg
Slider is not the problem. I want the headings to move over it.
This is the html section, the div that contains the slideshow, and I already put one h1
<div class="heroImg" id="heroImg">
<h1>
Graphic Design and Digital Art
</h1>
<div id=slidercontainer>
<div id=css3slider>
<img src="images/slideshowimg/malay.jpg" alt="White-tailed kite" >
<img src="images/slideshowimg/jkarta.jpg" alt="Hawk title=Hawk" >
<img src="images/slideshowimg/american.jpg" alt="Osprey" >
<img src="images/slideshowimg/aya.jpg" alt="Square-tailed kite" >
<img src="images/slideshowimg/malay.jpg" alt="White-tailed kite" >
</div>
</div>
</div>
This is the css -
#heroImg h1 {
color: rgba(255,102,0,1);
position: absolute;
top: 250px;
z-index: 99;
font-family: "Exo 2", "sans-serif;";
font-size: 2em;
left: 170px;
}
/* Slider CSS */
#-webkit-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; } 70% { left: -2048px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }
}
#-moz-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; } 70% { left: -2048px; opacity: 1; }
72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }}
#-o-keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; }
70% { left: -2048px; opacity: 1; } 72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }}
#keyframes slider {
0% { left: 0; opacity: 0; }
2% { opacity: 1; }
20% { left: 0; opacity: 1; }
21% { opacity: 0; }
24% { opacity: 0; }
25% { left: -1024px; opacity: 1; }
45% { left: -1024px; opacity: 1; }
46% { opacity: 0; }
48% { opacity: 0; }
50% { left: -2048px; opacity: 1; }
70% { left: -2048px; opacity: 1; } 72% { opacity: 0; }
74% { opacity: 0; }
75% { left: -3072px; opacity: 1; }
95% { left: -3072px; opacity: 1; }
97% { left: -3072px; opacity: 0; }
100% { left: 0; opacity: 0; }}
div#slidercontainer {
position: relative;
overflow: hidden;
background: #000
}
div#slidercontainer {
width: 1024px;
height: 500px;
}
div#sidercontainer img {
width: 1024px;
height: 500px;
float: left;
}
div#css3slider {
position: absolute;
width:5120px;
-webkit-animation-name:slider;
-webkit-animation-duration:20s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:slider;
-moz-animation-duration:20s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count:infinite;
-o-animation-name:slider;
-o-animation-duration:20s;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count:infinite;
animation-name:slider;
animation-duration:20s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}
div#css3slider img {
float: right;
}
div#slidercontainer:after {
font-size: 150px;
position: absolute;
z-index: 12;
color: rgba(255,255,255, 0);
left: 300px; top: 80px;
-webkit-transition: 1s all ease-in-out;
-ms-transition: 1s all ease-in-out;
-moz-transition: 1s all ease-in-out;
-o-transition: 1s all ease-in-out;
transition: 1s all ease-in-out;
}
div#slidercontainer:hover:after {
color: rgba(255,255,255, 0.6);
}

Answer 1

Try this
div#sidercontainer div.slidecontent {
width: 1024px;
height: 500px;
float: left;
}
div#css3slider div.slidecontent {
float: right;
}
Then add slide content div instead of image like
<div id=css3slider>
<div class="slidecontent">
<h1>Text to show</h1>
<img src="images/slideshowimg/image1.jpg" alt="" >
</div>
</div>