Animationsproblem? Text beim Start Fett

    Hallo Zusammen!

    Ich habe das Problem das meine Texte/Links, beim Start des Sliders, überlagert werden, bzw. in Fett erscheinen und beim zweiten Slide erst wieder normal werden. Im meinen Fall ist es der Home Link, welcher anfänglich immer erst in Fett erscheint. Habe es auch schon mit anderen Texten, in anderen Containern versucht und auch mit anderen Skripts. Leider komme ich nicht auf den Fehler und habe schon Stunden danach gegrübelt und gegoogelt. Nach meiner Logik sollte es Funktionieren, da die Animation in anderen Containern stattfindet, aber, na ja, leider will es nicht wie ich mag :(

    Ich hoffe mir kann hier jemand helfen und auch die Logik des Fehlers erklären. Würde es gerne verstehen um später die Animation noch anzupassen.

    Hier der Link zur meiner Testseite: http://test.renohelp.info

    Das HTML Skript:

    HTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>testserver</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/style1.css"  rel="stylesheet" type="text/css" /></head><body><! ------------- Start head ---------------->
<div id="head">
    <div class="logo">        <a href="index.php"><img src="images/logo.png" alt="logo"></a>    </div>    <div class="schriftzug">        <a href="index.php"><img src="images/schriftzug.png" alt="logo"></a>    </div></div><! ------------- Ende head ----------------><! ------------- start navigation ----------------><div id="nav">    <div id="links">        <ul>            <li id="links_box" class="btn">                        <a href="index.php">Home</a>                                </li>
        </ul>    </div></div><! ------------- Begin Slider ----------------><div class="browser"><div id="slider_box">    <div id="slider_inhalt">        <div id="slider_maske">            <ul>            <li id="eins" class="ani1">            <a href="#"> <img src="images/slider_bild1.png" alt="Steinteppich"/></a>                <div class="textfenster">                <h1>Steinteppich </h1>                </div>                <div class="test">                <h1>Der Allrounder für Innen und Außen</h1>                </div>            </li>            <li id="zwei" class="ani2">            <a href="#"> <img src="images/slider_bild2.png" alt="Trockenbau"/></a>                <div class="textfenster">                <p><h1>Trockenbau</h1>test</p>                </div>                 <div class="test">                <h1>Räume individuell anpassen</h1>                </div>
            </li>            <li id="drei" class="ani3">            <a href="#"> <img src="images/slider_bild3.png" alt="Tapetten"/></a>                <div class="textfenster">               <h1>Bodenvielfalt</h1>               </div>                <div class="test">                <h1>Laminat • Parkett • Vinyl • Steinteppich</h1>                </div>
            </li>            <li id="vier" class="ani4">            <a href="#"> <img src="images/slider_bild2.png" alt="Cougar"/></a>                <div class="textfenster">                <h1>Cougar</h1>                </div>            </li>
             <li id="fuenf" class="ani5">            <a href="#"> <img src="images/slider_bild1.png" alt="Cougar"/></a>                <div class="textfenster">                <h1>Cougar</h1>                </div>            </li>                       </ul>                    </div>         <div class="progress-bar">         </div>    </div></div></div><! ------------- Ende Slider ----------------->
</body></html>

    Das CSS Skript: